Examples

Examples here demonstrates personalized and responsive questions.

Every information including Scripts and previews all can be found at the provided links.

Feel free to use them.

I would appreciate if you could present proper acknowledgement where you acquired.

Ex001: Graphs of quadratic function

A. Script

graph='''var argsFromMain=null;function init(prms) {argsFromMain=prms;}//init();
if (argsFromMain == null) {argsFromMain=[200, [1, 1, -2], [-5, 5]];}const height = argsFromMain[0];cnvs.height = height;cnvs.width=height;const N=51;const aj=argsFromMain[1], xlim=argsFromMain[2];const dx=(xlim[1]-xlim[0])/(N-1);yMin=Math.floor(aj[2]-aj[1]*aj[1]/4-1);const ylim=[yMin, yMin+10];const xPole=-aj[1]/2;var x=[], y=[], v;for (j=0; j<N; j++) {  v=xlim[0]+j*dx; w=aj[0]*v**2 + aj[1]*v + aj[2];  if (yMin<w && w<yMin+10) {x.push(v); y.push(w);}}function x2cnvs(x) {return bOrigX+pxl2x*(x-xlim[0]);}function y2cnvs(y) {return bOrigY+bL-pxl2x*(y-ylim[0]);}const bOrigX=0.5, bOrigY=0.5, bL=height, pxl2x=bL/(xlim[1]-xlim[0]);ctx.beginPath();ctx.fillStyle="#eee";ctx.fillRect(bOrigX, bOrigY, bL, bL);ctx.strokeStyle="#ccc";for (let j=xlim[0]; j<=xlim[1]; j++) { px=x2cnvs(j); ctx.moveTo(px, bOrigY); ctx.lineTo(px, bOrigY+bL);ctx.stroke();}for (let j=Math.ceil(ylim[0]); j<=Math.floor(ylim[1]); j++) { py=y2cnvs(j); ctx.moveTo(bOrigX, py); ctx.lineTo(bOrigX+bL, py);ctx.stroke();}ctx.beginPath();ctx.strokeStyle="blue"; py=y2cnvs(0); ctx.moveTo(bOrigX, py); ctx.lineTo(bOrigX+bL, py); ctx.stroke();ctx.beginPath();ctx.strokeStyle="blue"; px=x2cnvs(0); ctx.moveTo(px, bOrigY); ctx.lineTo(px, bOrigY+bL); ctx.stroke();ctx.beginPath();ctx.font="normal 14px Arial";ctx.fillStyle="blue";ctx.fillText("O", x2cnvs(0)-15,y2cnvs(0)+15);ctx.fillText("x", bOrigX+bL-10,y2cnvs(0)-3);ctx.fillText("y", x2cnvs(0)-12, bOrigY+13);for (j=ylim[0]+1; j<ylim[1]; j++) {  if (j%2 == 0) {     if (j<0) {ctx.fillText(j.toString(), x2cnvs(0)-15,y2cnvs(j)+5);}     else if (j>0) {ctx.fillText(j.toString(), x2cnvs(0)-10,y2cnvs(j)+5);}  }}ctx.fillText("-4", x2cnvs(-4)-8,y2cnvs(0)+12);ctx.fillText("-2", x2cnvs(-2)-8,y2cnvs(0)+12);ctx.fillText("2", x2cnvs(2)-4,y2cnvs(0)+12);ctx.fillText("4", x2cnvs(4)-4,y2cnvs(0)+12);ctx.beginPath();ctx.strokeStyle="black";ctx.moveTo(x2cnvs(x[0]), y2cnvs(y[0]));for (j=1; j<N; j++) {ctx.lineTo(x2cnvs(x[j]), y2cnvs(y[j]));}ctx.stroke();ctx.beginPath();for (j=0; j<N; j++) {ctx.beginPath();  ctx.arc(x2cnvs(x[j]),y2cnvs(y[j]),2,0, 2*Math.PI);  ctx.stroke();}'''

figures={'graph': graph}

Q=['What is the correct function shown below?<br>figure(graph)<br>init({%prms%});']

A='''data=[]
choices=[]
for _ in range(6):
  b=random.choice([-4, -3,-2,-1, 0, 1, 2, 3, 4])
  c=random.choice([-4, -3,-2,-1, 0, 1, 2, 3, 4])
  choices.append([300, [1, b, c], [-5,5]])

indx=random.choice(range(len(choices)))
ansValue=choices[indx]
eqs=[]
term1=lambda v: '+ x' if v==1 else '- x' if v==-1 else f'+ {v}x' if v>0 else f'- {-v}x' if v<0 else ''
term2=lambda v: f'+ {v}' if v>0 else f'- {-v}' if v<0 else ''
eqs = []
for _, aj, _ in choices: eqs.append(f'EQ% x^2 {term1(aj[1])} {term2(aj[2])} %EQ')

answer=[{'choices':eqs, 'ans':eqs[indx]}]
prms=choices[indx]'''

QGs.append([Q, A, ('chap3', 'eq_graph1'), 'short'])

Unfolded code for the "graph" figure can be found here.

B. Preview

Ex002: Addition with shapes

A. Script

addFractions='''var argsFromMain=null;function init(prms) {argsFromMain=prms;}//init();
if (argsFromMain == null) {argsFromMain=[200, [1, 2, 2, 3]];}
var height = argsFromMain[0];cnvs.height = height;cnvs.width=2*height; var radius = cnvs.height/4;var cY = cnvs.height/2;var cX = cnvs.width/2;var radius = cY-20;
ctx.beginPath();ctx.font="normal 60px Arial";ctx.fillStyle="black";ctx.fillText("+", cX-17, cY+20);
var angle = 2*Math.PI/argsFromMain[1][1];for (let j=0; j<argsFromMain[1][1]; j++) {  ctx.beginPath();  ctx.moveTo(cX-radius-20, cY);  ctx.strokeStyle="black";  if (j<argsFromMain[1][0]) {ctx.fillStyle="#ed7";}  else {ctx.fillStyle="white";}  ctx.arc(cX-radius-20, cY, radius, j*angle, (j+1)*angle);  ctx.lineTo(cX-radius-20, cY);  ctx.fill();  ctx.stroke();}
angle = 2*Math.PI/argsFromMain[1][3];for (let j=0; j<argsFromMain[1][3]; j++) {  ctx.beginPath();  ctx.moveTo(cX+radius+20, cY);  ctx.strokeStyle="black";  if (j<argsFromMain[1][2]) {ctx.fillStyle="#7ed";}  else {ctx.fillStyle="white";}  ctx.arc(cX+radius+20, cY, radius, j*angle, (j+1)*angle);  ctx.lineTo(cX+radius+20, cY);  ctx.fill();  ctx.stroke();}'''

Q=['What is the sum of the two fill areas of the color drawn below?<br>figure(addFractions)<br>init({%prms%});']
A='''data=[]
import userfunctions
choices, indx, ansValue = userfunctions.func2()
answer=[{'choices':choices, 'ans':choices[indx]}]
prms=ansValue'''

QGs.append([Q, A, ('chap10', 'udf_fraction_shapes1'), 'choice'])

Unfolded code for the "addFractions" figure can be found here.

import random

def func2(choices=None, ans=None):
    from fractions import Fraction
    choicesBefore = []
    for j in range(15):
        fr1=Fraction(random.choice([1,2]), random.choice([4,5,6,7,8]))
        fr2=Fraction(random.choice([1,2]), random.choice([4,5,6,7,8]))
        tmp = (fr1, fr2, (fr1+fr2))
        if tmp[-1] not in [item[-1] for item in choicesBefore]: choicesBefore.append(tmp)

    choices=[]
    for _, _, fr in choicesBefore:
        choices.append(r'EQ% \frac {'+f'{fr.numerator}'+'} {'+f'{fr.denominator}'+'} %EQ')

    indx=random.choice(range(len(choices)))
    f1, f2, _=choicesBefore[indx]
    return choices, indx, [300, [f1.numerator, f1.denominator, f2.numerator, f2.denominator]]

if __name__ == '__main__':
    print(func2())

B. Preview

Ex003: Division expression with integer

A. Script

division='''var argsFromMain=null;function init(prms) {argsFromMain=prms;}//init();
if (argsFromMain == null) {argsFromMain=[[50,1000], ['x', '8', '÷', '3', '=', '6']];}cnvs.height = argsFromMain[0][0];cnvs.width = argsFromMain[0][1];
function drawRect(xo, yo) { ctx.beginPath(); ctx.strokeStyle="#888"; ctx.rect(xo, yo, rectA, rectA); ctx.stroke(); ctx.closePath();}
const word=argsFromMain[1], rectA=40, xo=50.5, yo=0.5, digits=['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'x'];
for (let i=0; i<word.length; i++) {
  if (digits.includes(word[i])) { ctx.beginPath(); ctx.strokeStyle="#888"; ctx.rect(xo+i*(rectA+5), yo, rectA, rectA); ctx.stroke();}
  if (word[i] != 'x') { ctx.beginPath(); ctx.fillStyle="red"; ctx.textAlign="center"; ctx.font="normal 40px Palatino Linotype"; ctx.fillText(word[i], xo+i*(rectA+5)+rectA/2, yo+rectA-6); }
}'''

figures={'division': division}

QGs=[]

Q=['Find the integer in the blank that completes the division expression below.figure(division)init({%prms%});',
   'Find the integer in the blank that completes the division expression below.figure(division)init({%prms%});']

A='''data=[]
vA=random.choice(range(2,20))
vB=random.choice(range(1,10))
op='÷'
vA *= vB
vAns=int(vA/vB)
vStr=list(f'{vA}{op}{vB}={vAns}')
x=random.choice([item for item in enumerate(vStr) if item[1].isnumeric()])
vStr[x[0]]='x'
exps=[str(f) for f in range(10)]
answer=[x[1], {'choices':exps, 'ans':x[1]}]
prms=[[50, 800], vStr]'''

Unfolded code for the "division" figure can be found here

B. Preview

The image below shows the result for 2 questions, one as short-answer and the other as multiple-choice, regarding elementary division expression:

• It would be a good practice if you try to modify the script above for other algebraic expressions, such as addition, subtraction, or multiplication?

Nk001: Division an integer with another

A. Script

Script is too long to display here. Use the link on the title to get the script.

B. Preview

Below is the initial screen shot of a particular question.

Below is the screen shot after student "played" to get correct answer and pressed the button "Submit".

Nk002: Adding 2 vectors

A. Script

Script is too long to display here. Use the link on the title to get the script.

B. Preview