NTNUJAVA Virtual Physics Laboratory
Enjoy the fun of physics with simulations!
Backup site http://enjoy.phy.ntnu.edu.tw/ntnujava/

Easy Java Simulations (2001- ) => misc => Topic started by: Fu-Kwun Hwang on March 21, 2009, 04:37:08 pm



Title: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on March 21, 2009, 04:37:08 pm
The following is a long division applet.
Click reset button to re-generate new formula.
Click < or > to move the step and find out the result.
Click the checkbox to add remainder (otherwise, remainder=0)

If "input?" checkbox is checked, user need to click the number shown to answer the question. (2009/03/22)

Click inside simulation region then
hit "h" key, will toggle another control bar (change range for numbers).
hit "k" will toggle user input mode
hit "w" will toggle show answer/step by step mode.
hot "r" will toggle remainder=0 mode


-*-


Title: Re: Long division applet (for primary school level)
Post by: lookang on March 31, 2009, 08:39:58 pm
hi prof,  i am unable figure out the variable assign to this number. but i just figure out ;D

it tv[(step-1)*2+1]

is there a way to display a field , using  tv[(step-1)*2+1] ?

i can  see per each field
tv[0]=
tv[1]=
tv[2]=
tv[3]=
tv[4]=
tv[5]=

nvm i think i know the answer! will keep trying and ask when need again


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on March 31, 2009, 09:26:54 pm
Yes. Those value are stored as tv[tid] array (Text Values)
For example:
"13" is a String in the above figure,
1 is calculate from 7-6 and 3 is from the 4th digit of "127364".
Code:
if(i else tv[tid]=cv3;


Title: Re: Long division applet (for primary school level)
Post by: lookang on March 31, 2009, 09:43:24 pm
Yes. Those value are stored as tv[tid] array (Text Values)
For example:
"13" is a String in the above figure,
1 is calculate from 7-6 and 3 is from the 4th digit of "127364".
Code:
if(i less than n2-1)tv[tid]=cv3/getV10(1,n2-i)*10+d3[n3-(n2-i-2)];
 else tv[tid]=cv3;
trying to read the code
thanks!


Title: Re: Long division applet (for primary school level)
Post by: lookang on March 31, 2009, 10:50:08 pm
just to keep you inform
your XML is encoded in the keyboard language.

reasons i not sure why but
1. i had to replace the ./. symbol as it is a unknown symbol in my windows OS
2. i had to change the position of the upper divide line and the curve divide to fit the existing numbers because it is misaligned when downloaded and read in my Windows OS.
3. the mask for the bottom  side of the working is not needed, i deleted it or make invisible, so it will block the numbers in the playback mode but it is not blocking in the input mode

for your consideration :D


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on March 31, 2009, 11:49:43 pm
May be it is due to the font I have selected to display those strings!
I will try to find out. Thanks!


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 10:06:44 am
 ;D


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 10:10:02 am
The attached image is screen captured image of the simulation on my computer.


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 10:16:27 am
u try the play mode, the mask is blocking


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 10:24:08 am
Please check out the attached image.
One of the number will be blocked, user need to click play button several time to see all the digits.
(Each click display one more digit).


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 10:27:17 am
oic, u designed it purposely to block, i understand now.

I have a qn on how to remix this XML

Hi prof

if(i less than n2-1)tvscaffold[tid]=cv3/getV10(1,n2-i)*10+d3[n3-(n2-i-2)]; // can give comments on the variables used here ?
 else tv[tid]=cv3;   // what does this line do?

i am trying to modify this code here to do this:
if  1234 / 5 = 246 remain 4

the working i am trying to capture is the numbers below
Code:
        246
     ______
5  / 1234
      10       
    _________
       234                      <--------------- how to capture this? instead of 23
       200
    ________
         34                     <----------------normal same as currently shown but i want the whole   
                                                           strings of number after
         30
Thanks!


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 11:41:47 am
For your example:

        246
     ______
5  / 1234
      10       
    _________
       234                      <--------------- how to capture this? instead of 23
       200
    ________
         34                     <----------------normal same as currently shown but i want the whole   
                                                           strings of number after
         30

The following code from my ejs "fixed relation page" will give you:
tv[0]=10;
tv[1]=234;
tv[2]=200;
tv[3]=34;
tv[4]=30;
tv[5]=4;
Code:
if(i<n2-1)tv[tid]=cv3/getV10(1,n2-i)*10+d3[n3-(n2-i-2)];
 else tv[tid]=cv3;


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 12:27:04 pm
notice
tv[1]=234;
tv[2]=200; is not shown as i suspect like u said in earlier post that the codes in doing some 7-6 and bring down to one number which i think to way is the bring down all the rest of the numbers.

currently
tv[1]=23;
tv[2]=20; check out my screen shot :D (http://www.phy.ntnu.edu.tw/ntnujava/index.php?action=dlattach;topic=1039.0;attach=883)

how to change your codes
 
Code:
if(i less than n2-1)tv[tid]=cv3/getV10(1,n2-i)*10+d3[n3-(n2-i-2)];
 else tv[tid]=cv3;
to do
tvscaffold[1]=234;
tvscaffold[2]=200; // assuming i need to define another array tvscaffold to capture the full number 234


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 05:03:42 pm
I understand what you want now. But, do you really want to do that?
It is O.K. for small number like 1234 in the above case.
What if the number is 1234567 do you really want to bring down all the number?

In my case:
I only bring down 23 so student can figure out the next number is 4*5=20 <23
But if you bring down 234, will it be easier for student to figure out the next number is 4 ?
if you bring down 234, then you will need another number to store 23.
Because the next step is 23-20, otherwise you will have to calculate 234-200.

Please check out the original design
(http://www.coolmath4kids.com/long-division/images/long-division-30.gif)
It is shown as 46-45 in the above picture. it is not shown as 465-450.

And for you new way of thinking tv[0]=1000 instead of tv[0]=10;

For my case:
 tv[0]=10;
 tv[1]=23;
 tv[2]=20;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;

For your new way of thinking:
 tv[0]=1000;
 tv[1]=230;
 tv[2]=200;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;

Because you only want to show tv[0] as 10, tv[2] as 20 so you will need to define another array to store 10, 20 in order to display it. (It will be easier to display 1000 for tv[0], but is it easy for student to know the first one is 200*5 instead of 2*5?

If you really want to do it that way:
What you need to change is
tv[0]*100;
tv[1]*10;
tv[2]*10;
tv[3]*1;
tv[4]*1;
tv[5]*1;

// the result is 246, you can get 100 from 246


There are many different way to write the same program.


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 06:48:38 pm
I understand what you want now. But, do you really want to do that?
It is O.K. for small number like 1234 in the above case.
What if the number is 1234567 do you really want to bring down all the number?

i agree with u that i also don't want to bring down all the rest of the numbers. The teacher teaching want to teach divide and conquer idea so in his explanation, his method is the reasoning below our logic way of solving division. I agreed to help him get it done, i explain to him your and me agreement but he believes there is value in creating such a remix of your applet.

In my case:
I only bring down 23 so student can figure out the next number is 4*5=20 <23
But if you bring down 234, will it be easier for student to figure out the next number is 4 ?
if you bring down 234, then you will need another number to store 23.
Because the next step is 23-20, otherwise you will have to calculate 234-200.

Please check out the original design
(http://www.coolmath4kids.com/long-division/images/long-division-30.gif)
It is shown as 46-45 in the above picture. it is not shown as 465-450.

And for you new way of thinking tv[0]=1000 instead of tv[0]=10;

For my case:
 tv[0]=10;
 tv[1]=23;
 tv[2]=20;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;

For your new way of thinking:
 tv[0]=1000;
 tv[1]=230;
 tv[2]=200;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;

Because you only want to show tv[0] as 10, tv[2] as 20 so you will need to define another array to store 10, 20 in order to display it. (It will be easier to display 1000 for tv[0], but is it easy for student to know the first one is 200*5 instead of 2*5?

If you really want to do it that way:
What you need to change is
tv[0]*100;
tv[1]*10;
tv[2]*10;
tv[3]*1;
tv[4]*1;
tv[5]*1;

// the result is 246, you can get 100 from 246


There are many different way to write the same program.


I agree with u but he is the implementor of the applet in some classroom, i only remix from yours, you r the original designer. so how? we explain to him again so let him re-examine his assumption of the value of his pedagogical approach?

anyway i already finished remixing your and my same idea!

i made a duplicate so that there are 2 ways of thinking!
http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=1036msg3842;topicseen#msg3842
style 1 is our same idea
style 2 is his idea


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 07:08:53 pm
Things can be done in many different ways. Sometime, there is no right way or wrong way. But there are many ways due to different situation.

What I need to know is : What is the requirement:
Do you want:
 tv[0]=1000;
 tv[1]=230;
 tv[2]=200;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;
or
 tv[0]=10;
 tv[1]=230;
 tv[2]=20;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;


What if there are more numbers, like 123456
Does the teachers always want to bring down all the numbers?

Please ask the teacher to explain it in all details?
Different requirements may need to be programmed different way. (Login might be different).
Sometime, it is difficult to modify the code if an extra requirement is not fit with the situation.
That is also the reason why I always ask you for alll detail for your requirement before I created simulations for you (or other users).

It does not matter what the teacher want. The important thing is write download all the detail specifications.
It is better if the teacher who need the simulation can draw some diagram/plot to explain what s/he really want,
and it will be even better if s/he can provide the reason. (May be we can find out a better solution).


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 07:46:55 pm
Things can be done in many different ways. Sometime, there is no right way or wrong way. But there are many ways due to different situation.
agreed :D

What I need to know is : What is the requirement:
Do you want:
 tv[0]=1000;
 tv[1]=230;       234 actually
 tv[2]=200;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;
or
 tv[0]=10;
 tv[1]=230;
 tv[2]=20;
 tv[3]=34;
 tv[4]=30;
 tv[5]=4;
the requirement is
tv[0]=1000; // correct is graphically is a 1000(divide) + 234(conquer) = 1234
 tv[1]=234; // so yes, the teacher always want to bring down all numbers, part of his divide and conquer idea, graphically 234
 tv[2]=200; //  correct 200(divide) +34(conquer) =234
 tv[3]=34; // so yes, the teacher always want to bring down all numbers, part of his divide and conquer idea, graphically 34
 tv[4]=30; // correct 30(divide) +4(conquer) =34
 tv[5]=4; // 4 remainder end.
[/quote]

What if there are more numbers, like 123456
Does the teachers always want to bring down all the numbers?
yes :D

Please ask the teacher to explain it in all details?
Different requirements may need to be programmed different way. (Login might be different).
Sometime, it is difficult to modify the code if an extra requirement is not fit with the situation.
That is also the reason why I always ask you for alll detail for your requirement before I created simulations for you (or other users).

It does not matter what the teacher want. The important thing is write download all the detail specifications.
It is better if the teacher who need the simulation can draw some diagram/plot to explain what s/he really want,
and it will be even better if s/he can provide the reason. (May be we can find out a better solution).


i  have given him the link at the beginning of the collaboration, i will ask him to register n discuss together.  ;)

honestly, your applet is very good, i managed to add the scaffold the way u n me think alike already.

Thanks for your help! This forum is a Gold mine of knowledge :)

By the way, i was tinkering with the codes again, i noticed may need more effort than just changing the numbers in the codes.
sorry to cause trouble again.


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 09:37:21 pm
Let me make sure again:
Is the following what you/teacher want (number are misaligned):

Code:
       __63682_
    2 ) 127364
         120000
       --------
            7364
            6000
          -------
            1364
            1200
          -------
              164
              160
              ----
                 4
                 4
                ---
                 0 



Title: Re: Long division applet (for primary school level)
Post by: lookang on April 01, 2009, 10:48:27 pm
yup. agreed


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 01, 2009, 11:43:59 pm
I hope the following is what you want.

I add a setnmode() custom function to add those numbers (you want) at the end of the string.


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 02, 2009, 12:10:43 pm
nice! it is what i thought it will do.

i will examine closely the new users_ntnu_fkh_division2.xml to port the new display into the file that i have being modifying from users_ntnu_fkh_division.xml.


I intend to create a checkbox to allow toggling from the usual way to this users_ntnu_fkh_division2.xml way of looking at division.

will report here any findings here later.


Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 02, 2009, 02:40:38 pm
The checkbox is there already. click inside the simulation region. Hit h and the tool bar will appear.
You will find nmode checkbox in the toolbar.
It can be set with javascript, too!


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 06, 2009, 10:13:39 am
This is the legally remixed applet.
http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=1036msg3842;topicseen#msg3842


I notice when the applet is downloaded and used as a standalone in the full screen view
the mask that covers the top answer is control by

maskrx=(x1+size+(n3-n2+step+2)*w*0.8); // by trial and error the position of mask

the text i2+"" is control by Pos X = x1+size+w*xshift

Is there a way to cleverly detect the width of the applet, and then calculated the amount to shift for each step of the answer?

currently the mask work well in current size of "750,600"

In full screen the mask move too much, but in current size of "750,600" the mask is nice and work well.



Title: Re: Long division applet (for primary school level)
Post by: Fu-Kwun Hwang on April 06, 2009, 10:50:10 am
The trial and error value you got is good for special window size (it will be different for 1024x768 and 800x600).
You should use the following function to get width and height of the EJS window frame and calculate suitable values for your program.

_view.drawingFrame.getWidth();
_view.drawingFrame.getHeight();

where drawingFrame is the name of your top level frame (It might be different if you changed the name when you created the view.)


Title: Re: Long division applet (for primary school level)
Post by: lookang on April 06, 2009, 07:44:04 pm
i added
description is the XML
added description in my XML
Original works byFu-Kwun Hwang
http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=1039

Derived work Remix (finer customisation) legally by lookang under
This work is licensed under a Creative Commons Attribution 2.5 Taiwan License

http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=1036msg3842;topicseen#msg3842
to trace its development.

By the way, Your tip is fantastic!

i managed to make it work well even in full screen due to a modifcation.

added codes

Added variables
getwidth = double
Fixed relationship
getwidth = _view.centre.getWidth(); // centre is name of view
maskrx=x1+size+(n3-n2+step+2)*w*0.82*750/getwidth;