# Template Code Examples

Here is an example of a quiz section specification:

```Template
InstructionBlock
GoalBlock
GoalBlock
QuestionBlock
question The mean of [3,1,4,2] is
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
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 &lt;b&gt;Plot&lt;/b&gt; 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()
&amp;&amp; nodes.angularVelocity.plotted()
&amp;&amp; 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
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 &gt; 120 || angle &lt; -120) { // handle rare case
%angularVelocity = 0;
%angularAcceleration = 0;
}
end
mouseCode
if (nodes.pendulumPlot.mouseDown &amp;&amp; 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 &gt; -170 &amp;&amp; angle &lt; 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] &amp;larr; [Angle] + [Angular Velocity]
decimalPlaces 2
minValue -170
maxValue 170
MathBlock
label Angular Velocity
expression %angularVelocity + %angularAcceleration
rule [Angular Velocity]&lt;br&gt;&amp;larr; [Angular Velocity] + [Angular Acceleration]
decimalPlaces 4
MathBlock
label Angular Acceleration
expression -%gravity / %length * Math.sin( %angle * 3.14159 / 180 ) * 0.25
rule [Angular Acceleration]&lt;br&gt;&amp;larr; -[Gravity] / [Length] &amp;times; 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
```