Long division applet (for primary school level)

[Fu-Kwun Hwang]

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

-*-

Embed a running copy of this simulation
<applet code='users.ntnu.fkh.division_pkg.divisionApplet.class' archive='http://www.phy.ntnu.edu.tw/ntnujava/ejsuser/2/ejs_division.jar' name='division3858' id='division3858' width='529' height='545' mayscript=true><param name='draggable' value='true'></applet>
Embed a running copy link(show simulation in a popuped window)
<a href='http://www.phy.ntnu.edu.tw/ntnujava/msg.php?smfejs=3858' target='smfejs'>Run simulation</a>

Full screen applet or Problem viewing java?Add http://www.phy.ntnu.edu.tw/ to exception site list
Press the Alt key and the left mouse button to drag the applet off the browser and onto the desktop. This work is licensed under a Creative Commons Attribution 2.5 Taiwan License

• Please feel free to post your ideas about how to use the simulation for better teaching and learning.
• Post questions to be asked to help students to think, to explore.
• Upload worksheets as attached files to share with more users.

Let's work together. We can help more users understand physics conceptually and enjoy the fun of learning physics!

[lookang]

hi prof,  i am unable figure out the variable assign to this number. but i just figure out

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

[Fu-Kwun Hwang]

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;

[lookang]

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!

[lookang]

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

[Fu-Kwun Hwang]

May be it is due to the font I have selected to display those strings!
I will try to find out. Thanks!

[lookang]

 

[Fu-Kwun Hwang]

The attached image is screen captured image of the simulation on my computer.

[lookang]

u try the play mode, the mask is blocking

[Fu-Kwun Hwang]

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).

[lookang]

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!

[Fu-Kwun Hwang]

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;

[lookang]

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

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

[Fu-Kwun Hwang]

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

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.

[lookang]

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

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

[Fu-Kwun Hwang]

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).

[lookang]

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

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

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.

[Fu-Kwun Hwang]

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 

[lookang]

yup. agreed

[Fu-Kwun Hwang]

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.

Embed a running copy of this simulation
<applet code='users.ntnu.fkh.division2_pkg.division2Applet.class' archive='http://www.phy.ntnu.edu.tw/ntnujava/ejsuser/2/ejs_division2.jar' name='division24011' id='division24011' width='542' height='580' mayscript=true><param name='draggable' value='true'></applet>
Embed a running copy link(show simulation in a popuped window)
<a href='http://www.phy.ntnu.edu.tw/ntnujava/msg.php?smfejs=4011' target='smfejs'>Run simulation</a>

Full screen applet or Problem viewing java?Add http://www.phy.ntnu.edu.tw/ to exception site list
Press the Alt key and the left mouse button to drag the applet off the browser and onto the desktop. This work is licensed under a Creative Commons Attribution 2.5 Taiwan License

• Please feel free to post your ideas about how to use the simulation for better teaching and learning.
• Post questions to be asked to help students to think, to explore.
• Upload worksheets as attached files to share with more users.

Let's work together. We can help more users understand physics conceptually and enjoy the fun of learning physics!

[lookang]

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.

[Fu-Kwun Hwang]

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!

[lookang]

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.; // 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.

[Fu-Kwun Hwang]

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.)

[lookang]

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;