Template Code Examples

Here is an example of a quiz section specification:

Template
    title Stat Invader Quiz
InstructionBlock
    text Answer these questions about the statistics of sets of numbers.
GoalBlock
    type answerAll
GoalBlock
    type checkAnswers
QuestionBlock 
    question The mean of [3,1,4,2] is
    answers
        a. 2
        b* 2.5
        c. 3
        d. 10
    end
    explanation The sum is 10 and 10 divided by 4 is 2.5.
QuestionBlock 
    question The median of [9,1,2] is
    answers
        a* 2
        b. 4
        c. 4.5
    end
    explanation If we sort the set, we have [1,2,9] and 2 is the middle element.
QuizCheckBlock

Here is an example of a more complex page specification:

PageTemplate
    name main
    title Pendulum Simulation
parameter $part
InstructionBlock
    visible $part == 1
    text
        Click the <b>Plot</b> links to see have angle, velocity, and acceleration 
        change over time.  Use your mouse to move the pendulum.
    end
InstructionBlock
    visible $part == 2
    text
        Try different values for the pendulum length, pendulum mass, and gravity.
        How do these influence the speed of the pendulum swing?
    end
GoalBlock
    visible $part == 1
    text Plot angle, angular velocity, and angular acceleration.
    goalCode 
        return nodes.angle.plotted() 
            && nodes.angularVelocity.plotted() 
            && nodes.angularAcceleration.plotted();
    end
GoalBlock
    visible $part == 1
    text Move the pendulum.
    goalCode return section.manualMove;
GoalBlock
    visible $part == 2
    text Change the pendulum length.
    goalCode return section.lengthChanged;
GoalBlock
    visible $part == 2
    text Change the pendulum mass.
    goalCode return section.massChanged;
GoalBlock
    visible $part == 2
    text Change the gravity value.
    goalCode return section.gravityChanged;
ControlBlock
    autoStart true
    updatesPerSecond 20
define $xCenter 120
define $yCenter 120
DrawBlock
    name pendulumPlot
    canvasWidth 480
    canvasHeight 260
    xMax 240
    yMax 130
    showFrame false
    initCode
        section.timer = 0;
        section.manualMove = false;
        section.massChanged = false;
        section.lengthChanged = false;
        section.gravityChanged = false;
    end
    drawCode
        var theta = %angle * 3.14159 / 180;
        var x = $xCenter + %length * Math.sin( theta );
        var y = $yCenter - %length * Math.cos( theta );
        ctx.strokeStyle = "rgb(0,0,0)";
        ctx.fillStyle = "rgb(0,0,255)";
        ctx.lineWidth = 3;
        ctx.drawLine( $xCenter, $yCenter, x, y );
        ctx.drawCircle( $xCenter, $yCenter, 2 );
        ctx.drawCircle( x, y, %mass * 0.15 );
        if (section.timer) {
            var seconds = section.timer * 0.05;
            var text = seconds.toFixed( 2 ) + " s";
            ctx.font = "bold 10px sans-serif"
            ctx.fillStyle = "rgb(0,0,0)";
            ctx.textAlign = "left"
            ctx.textBaseline = "middle"
            ctx.drawText( text, 10, 10 );
        }
    end
    updateCode
        var angle = %angle
        if (angle > 120 || angle < -120) { // handle rare case
            %angularVelocity = 0;
            %angularAcceleration = 0;
        }
    end
    mouseCode
        if (nodes.pendulumPlot.mouseDown && section.noManualMove === undefined) {
            section.manualMove = true;
            var xDiff = x - $xCenter;
            var yDiff = y - $yCenter;
            var theta = Math.atan2( xDiff, -yDiff );
            var angle = theta * 180 / 3.14159;
            if (angle > -170 && angle < 170) {
                %angle = angle;
                %angularVelocity = 0;
                %angularAcceleration = 0;
            }
        }
    end
HorizontalGroupBlock
    name angleGroup
    children angle,angularVelocity,angularAcceleration
MathBlock
    name angle
    label Angle (Degrees)
    initValue 45
    expression %angle + %angularVelocity + %angularAcceleration
    rule [Angle] ← [Angle] + [Angular Velocity]
    decimalPlaces 2
    minValue -170
    maxValue 170
MathBlock
    label Angular Velocity
    expression %angularVelocity + %angularAcceleration
    rule [Angular Velocity]<br>← [Angular Velocity] + [Angular Acceleration]
    decimalPlaces 4
MathBlock
    label Angular Acceleration
    expression -%gravity / %length * Math.sin( %angle * 3.14159 / 180 ) * 0.25
    rule [Angular Acceleration]<br>← -[Gravity] / [Length] × sin( [Angle] )
    decimalPlaces 4
HorizontalGroupBlock
    children length,mass,gravity
InputBlock
    visible $part == 2
    label Length
    minValue 50
    maxValue 100
    initValue 100
    changeCode
        section.lengthChanged = true;
    end
InputBlock
    visible $part == 2
    label Mass
    minValue 10
    maxValue 100
    initValue 50
    changeCode
        section.massChanged = true;
    end
InputBlock
    visible $part == 2
    label Gravity
    minValue 0
    maxValue 100
    initValue 50
    changeCode
        section.gravityChanged = true;
        if (%gravity == 0) {
            %angularVelocity = 0;
            %angularAcceleration = 0;
        }
    end