Ejs open source Division java Applet for Primary Mathematics with scaffolds

[lookang]

reference:
http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=1039.msg3858#msg3858
Ejs Short and Long Division Applet for Primary Mathematics with scaffolds 1 & 2

Embed a running copy of this simulation
<applet code='users.sgeducation.lookang.divisionwee11_pkg.divisionwee11Applet.class' archive='http://www.phy.ntnu.edu.tw/ntnujava/ejsuser/14019/ejs_divisionwee11.jar' name='divisionwee113842' id='divisionwee113842' width='750' height='600' 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=3842' 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]

some google results

http://www.bbc.co.uk/schools/ks3bitesize/maths/number/whole_numbers_2_2.shtml

Long division
In short division the number we divided by consisted of a single digit (less than 10). In long division the number we divide by will consist of at least 2 digits (10 or more), and the method is slightly different:

modify:
1. replace divide sign is not recognize in my windows os xp
2. re position the mask for the magneta answers
3. added left panel for debugging
4. added codes for scaffolds top graphical space
5. added 2 styles of understanding divisions
6.added codes for full screen view the numbers are dynamically calculated and aligned for school implementation



I will be making one applet for primary 3 together with my colleague who seems interested to explore applet making.
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

short division



so far, the sliders are mentioned. details he knows, but he is explaining to me the way he conceptualize it.

so watch this space for developments!

[lookang]

simply awesome
thanks for taking your personal weekend time to make this!

i will try to read your XML asap.

[lookang]

The Long Division applet is a very beautiful app.

i aim to be able to add graphical representation to enhance your XML source.

An initial idea is to draw a rectangle say length i3+"",

as the user in input mode, decide to choose a number from 0,1,2,3,4,5,6,7,8,9

as the number is chosen, graphically the rectangle is divided into 2 parts.

For example, 100 / 7

on click answer 1, then graphic show is 70 and 30 of length, text is "CORRECT!"

if on click answer 0, then graphic show is 0 and 100 of length text is "THAT IS DIVIDE TOO LITTLE, CORRECT?"

if on click answer 2, then graphic show is 140 and -40 of length text is "THAT IS DIVIDE TOO MUCH, CORRECT?"
if on click answer 3, then graphic show is 210 and -110 of length text is "THAT IS DIVIDE TOO MUCH, CORRECT?"
and so on


next

on click answer 4, then graphic show is 28 and 2 of length, text is "CORRECT!"


if on click answer 0, then graphic show is 0 and 30 of length text is "THAT IS DIVIDE TOO LITTLE, CORRECT?"
if on click answer 1, then graphic show is 7 and 23 of length text is "THAT IS DIVIDE TOO LITTLE, CORRECT?"
and so on

if on click answer 5, then graphic show is 35 and -5 of length text is "THAT IS DIVIDE TOO MUCH, CORRECT?"
if on click answer 6, then graphic show is 42 and -12 of length text is "THAT IS DIVIDE TOO MUCH, CORRECT?"
and so on


check 2 is not divide by 7 , end.
show r = 2

therefore answer is 100/ 7 = 14 r=2

basically it is an attempt to give a graphic representation add-on to your already beautifully design codes in XML, to add visual dimension (divide and conquer idea with graphics) to understanding this mathematical operation.

The way is has be taught in traditional divide operations is the set of logics and rules but if can add visuals to aid understanding, it will be super cool!

i got my friend ideas after discussing with him just now

[lookang]

too complicated for me to break up the codes.

will try to understand asap

[lookang]

completed remixing from Prof Hwang XML.
now with style 1 and style 2 of thinking about division.

Thanks Prof Hwang for your vision & passion for free access to education interactive digital media.

[lookang]

appears to have a bug after a big number is used. like 123456.

will investigate when time permits

[Fu-Kwun Hwang]

I did not find problem with my original version, except that the font were not the same which might cause some misalignment problem.

[lookang]

i tried on your too, same problem is the play left and right mode happens when the number to divide by is very big, i tested a 6 digit number
123456 and found a very minor bug.

input mode works fine!

if you fixed your http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=1039.msg3858#msg3858, alert me i go study your codes and implement on this one with the scaffolds?

for ur info, so far, the school teachers used it did feedback some suggestions to improve this applet here but my friend is trying to fix it himself, to learn Ejs. it is interesting not everyone is into writing on forums, they prefer to read:)

when got time, i hint to him to post it on the forum for everyone to learn from:)

[Fu-Kwun Hwang]

There is a variable "n0" in the "numbers" tabs for "Variables".
It was define as n0=5. It is a number to declare array size.
The applet will fail for number with more than 5 digits.
Change it to a larger number should fix the above problem.

PS. O also modified some variables in the view to fix the alignment problem.

Feed back from teachers are always highly welcomed. Please ask them to post it or you can post it for them,

[lookang]

thx! made n0 = 8,

trying to come up with a loop for generalized the following codes

else if ( step==0&&step<(n2-1) ) {
//scaffoldtxt="Largest number that can multiply "+ i1 +" that is < "+getNumber(i3,i1)+" ? ";
//nmode = false;
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[1]+" ? ";
//nmode = true;

scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/10)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[1]+" ? ";

}

if ( step==1&&step<(n2-1) ) {
//scaffoldtxt="Largest number that can multiply "+ i1 +" that is < "+getNumber(i3,i1)+" ? ";
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[3]+" ? ";
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/100)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[3]+" ? ";

}
if ( step==2&&step<(n2-1) ) {
//scaffoldtxt="Largest number that can multiply "+ i1 +" that is < "+getNumber(i3,i1)+" ? ";
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[5]+" ? ";
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/1000)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[5]+" ? ";

}
if ( step==3&&step<(n2-1) ) {
//scaffoldtxt="Largest number that can multiply "+ i1 +" that is < "+getNumber(i3,i1)+" ? ";
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[7]+" ? ";
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/10000)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[7]+" ? ";

}
if ( step==4&&step<(n2-1) ) {
//scaffoldtxt="Largest number that can multiply "+ i1 +" that is < "+getNumber(i3,i1)+" ? ";
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[9]+" ? ";
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/10000)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[9]+" ? ";

} // added by wee notice the step only until step==4, so only works for digits 12345
// need to copy and paste more steps if needed for large numbers like 123456


into ...........


for(int i=0;i<(n2-1);i++){
scaffoldtxtarray[j]="Largest number that can multiply "+ i1 +" that is =< "+tv[2*i+1]+" ? ";
scaffoldtxt1array[j]="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/100)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[2*i+1]+" ? ";

}

wonder if it will work

got to test it with more codes to make the scaffold texts appear correctly

[Fu-Kwun Hwang]

You are using string array. However, I think you only need to show one of the element at a time.
You can try to use

Code:

if (step<(n2-1) ) {
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[2*step+1]+" ? "; 
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/100)
}

[lookang]

You are using string array. However, I think you only need to show one of the element at a time.
You can try to use

Code:

if (step<(n2-1) ) {
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[2*step+1]+" ? ";
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/100)
}

beautiful. Thanks for reading this self-posting, to force myself to continue to work improve the applet.

interestingly i didn't think of it your way, indeed elegant. Thanks!
i was still thinking of doing a for loop LOL.

the complete code is

if ( step==-1 ) { // method for step -1 is different from step 0 onwards
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+getNumber(i3,i1)+" ? ";

scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+scaffoldpower+" that is equal or less than "+i3+" ? ";

}
else if (step<(n2-1) ) { // testing You are using string array. However, I think you only need to show one of the element at a time.
//You can try to use
//scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[2*i+1]+" ? ";
//scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/100)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[2*i+1]+" ? ";
scaffoldtxt="Largest number that can multiply "+ i1 +" that is =< "+tv[2*step+1]+" ? ";
scaffoldtxt1="Largest number that can multiply "+ i1 +"*"+(int)(Math.pow(10,(int)(Math.log(i2/100)/Math.log(10.)+1.e-8)))+" that is equal or less than "+txt[2*step+1]+" ? ";


}

else if (step==(n2-1)&&answermode==true ){ // added to create a end message


  scaffoldtxt="Well Done!" ;
scaffoldtxt1="Well Done! ";
  }
else if (step==(n2-1)&&answermode==false ) {
scaffoldtxt="Now test your understanding using the input! " ;
scaffoldtxt1="Now test your understanding using the input! ";
  }

[liangsoon]

Made some minor change

[Fu-Kwun Hwang]

Welcome aboard! Hope to find more simulations posted from you!