Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

fix #11230; fix #11347; fix #11388; fix #11396; fix #11399; fix #11427;…

… fix #11439; fix #11450; fix #11471; fix #11487; fix #11491; fix #11493; fix #11517; fix #11532; fix #11542; fix #11572; fix #11591; fix #11614; fix #11632; fix #11750; fix #11782; fix #11798; fix #11841; fix #11854; fix #11855; fix #11917; fix #11944; fix #11961; fix #11965; fix #11988; fix #11999; fix #12012; fix #12050; fix #12063; fix #12067; fix #12078; fix #12124; fix #12126; fix #12127; fix #12171; fix #12189; fix #12216; fix #12219; fix #12280; fix #12284; fix #12366; fix #12379; fix #12421; fix #12444; fix #12453; fix #12460; fix #12461; fix #12484; fix #12488; fix #12491; fix #12543; fix #12544; fix #12592; fix #12694; fix #12826; fix #12840; fix #12842; fix #12852; fix #12902; fix #12916; fix #13024; fix #13056; fix #13071; fix #13074; fix #13097; fix #13102; fix #13135; fix #13150; fix #13263; fix #13315; fix #13344; fix #13380; fix #13387; fix #13391; fix #13411; fix #13499; fix #13500; fix #13537; fix #13585; fix #13589; fix #13892; fix #13912; fix #13991; fix #13993; fix #14047; fix #14055; fix #14084; fix #14086; fix #14122; fix #14126; fix #14259; fix #14361; fix #14483; fix #14494; fix #14508; fix #14581; fix #14599; fix #14615; fix #14618; fix #14641; fix #14710; fix #14853; fix #15678; fix #15753; fix #15811; fix #15990; fix #16023; fix #16097; fix #16129; fix #16130; fix #16181; fix #16189; fix #16196; fix #16219; fix #16315; fix #16327; fix #16383; fix #16454; fix #16519; fix #16534; fix #16672; fix #16696; fix #16846; fix #16892; fix #16907; fix #16956; fix #16985; fix #17093; fix #17239; fix #17406; fix #17445; fix #17464; fix #17469; fix #17479; fix #17548; fix #17688; fix #17932; fix #17958; fix #17998; fix #18057; fix #18081; fix #18087; fix #18100; fix #18102; fix #18108; fix #18117; fix #18121; fix #18131; fix #18151; fix #18170; fix #18179; fix #18182; fix #18230; fix #18277; fix #18278; fix #18332; fix #18340; fix #18344; fix #18345; fix #18387; fix #18458; fix #18459; fix #19530; fix #19535; fix #19539; fix #19550; fix #19599; fix #19633; fix #19645; fix #19662; fix #19755; fix #19756; fix #19778; fix #19782; fix #19814; fix #19818; fix #19834; fix #19886; fix #19890; fix #19893; fix #19997; fix #20031; fix #20033; fix #20035; fix #20107; fix #20167; fix #20196; fix #20268; fix #20288
  • Loading branch information...
commit 78735b65eac8b57c2e15c4f7ea323b301ca7150a 1 parent f5655f3
@beneater beneater authored
Showing with 109 additions and 68 deletions.
  1. +109 −68 exercises/telling_time_2.html
View
177 exercises/telling_time_2.html
@@ -11,22 +11,22 @@
<div id="set-hands" data-weight="3">
<div class="vars">
- <div data-ensure="!( HOUR === 1 && MINUTE === 0 )">
- <var id="HOUR">randRange( 1, 12 )</var>
+ <div data-ensure="!(HOUR === 1 && MINUTE === 0)">
+ <var id="HOUR">randRange(1, 12)</var>
<var id="MINUTE_INCREMENT">15</var>
- <var id="MINUTE">randRange( 0, (60 / MINUTE_INCREMENT) - 1 ) * MINUTE_INCREMENT</var>
+ <var id="MINUTE">randRange(0, (60 / MINUTE_INCREMENT) - 1) * MINUTE_INCREMENT</var>
</div>
<var id="MINUTE_IS_ZERO">MINUTE === 0</var>
- <var id="NICE_MINUTE"> MINUTE &gt; 5 ? MINUTE : "0" + MINUTE</var>
+ <var id="NICE_MINUTE">MINUTE &gt; 5 ? MINUTE : "0" + MINUTE</var>
<var id="TIME">HOUR + ":" + NICE_MINUTE</var>
</div>
- <p class="question">Set the clock to <var>TIME</var>. </p>
+ <p class="question">Set the clock to <var>TIME</var>.</p>
<div class="problem">
<div class="graphie" id="clock">
- init({ range: [ [-4, 4 ], [ -4, 4 ] ], scale: 45 });
+ init({ range: [[-4, 4], [-4, 4]], scale: 45 });
var clockRadius = 3.75;
var minuteSnapPoints = 12;
@@ -42,12 +42,12 @@
minuteSnapDegrees = 360 / minuteSnapPoints;
hourSnapDegrees = 360 / hourSnapPoints;
- var clock = addAnalogClock( { radius: clockRadius, minuteTicks: 60 } );
+ var clock = addAnalogClock({ radius: clockRadius, minuteTicks: 60 });
clock.draw();
addMouseLayer();
- function movePartnerPoint( options ) {
+ function movePartnerPoint(options) {
var x = options.x;
var y = options.y;
@@ -59,11 +59,11 @@
if (isOuterPoint) {
ratio = 1 / ratio;
- point.setCoord( [ x * ratio , y * ratio ] );
- outerPoint.setCoord( [ x, y ] );
+ point.setCoord([x * ratio , y * ratio]);
+ outerPoint.setCoord([x, y]);
} else {
- point.setCoord( [ x, y ] );
- outerPoint.setCoord( [ x * ratio, y * ratio ] );
+ point.setCoord([x, y]);
+ outerPoint.setCoord([x * ratio, y * ratio]);
}
point.updateLineEnds();
@@ -75,12 +75,12 @@
constraints: {
fixedDistance: {
dist: minuteRadius,
- point: [ 0, 0 ],
+ point: [0, 0],
snapPoints: 12
}
},
- onMove: function( x, y ) {
- return movePartnerPoint( { x: x, y: y, point: this, outerPoint: outerMinutePoint, isOuterPoint: false } );
+ onMove: function(x, y) {
+ return movePartnerPoint({ x: x, y: y, point: this, outerPoint: outerMinutePoint, isOuterPoint: false });
},
normalStyle: {
fill: ORANGE,
@@ -93,16 +93,16 @@
});
outerMinutePoint = addMovablePoint({
- coord: polar( outerPointRadius, minuteStartAngle ),
+ coord: polar(outerPointRadius, minuteStartAngle),
constraints: {
fixedDistance: {
dist: outerPointRadius,
- point: [ 0, 0 ],
+ point: [0, 0],
snapPoints: 12
}
},
- onMove: function( x, y ) {
- return movePartnerPoint( { x: x, y: y, point: minutePoint, outerPoint: this, isOuterPoint: true } );
+ onMove: function(x, y) {
+ return movePartnerPoint({ x: x, y: y, point: minutePoint, outerPoint: this, isOuterPoint: true });
},
normalStyle: {
fill: ORANGE,
@@ -115,16 +115,16 @@
});
hourPoint = addMovablePoint({
- coord: polar( hourRadius, hourStartAngle ),
+ coord: polar(hourRadius, hourStartAngle),
constraints: {
fixedDistance: {
dist: hourRadius,
- point: [ 0, 0 ],
+ point: [0, 0],
snapPoints: hourSnapPoints
}
},
- onMove: function( x, y ) {
- return movePartnerPoint( { x: x, y: y, point: this, outerPoint: outerHourPoint, isOuterPoint: false } );
+ onMove: function(x, y) {
+ return movePartnerPoint({ x: x, y: y, point: this, outerPoint: outerHourPoint, isOuterPoint: false });
},
normalStyle: {
fill: BLUE,
@@ -137,16 +137,16 @@
});
outerHourPoint = addMovablePoint({
- coord: polar( outerPointRadius, hourStartAngle ),
+ coord: polar(outerPointRadius, hourStartAngle),
constraints: {
fixedDistance: {
dist: outerPointRadius,
- point: [ 0, 0 ],
+ point: [0, 0],
snapPoints: hourSnapPoints
}
},
- onMove: function( x, y ) {
- return movePartnerPoint( { x: x, y: y, point: hourPoint, outerPoint: this, isOuterPoint: true } );
+ onMove: function(x, y) {
+ return movePartnerPoint({ x: x, y: y, point: hourPoint, outerPoint: this, isOuterPoint: true });
},
normalStyle: {
fill: BLUE,
@@ -160,7 +160,7 @@
minuteHand = addMovableLineSegment({
pointA: minutePoint,
- coordZ: [ 0, 0 ],
+ coordZ: [0, 0],
fixed: true,
normalStyle: {
stroke: ORANGE,
@@ -170,7 +170,7 @@
hourHand = addMovableLineSegment({
pointA: hourPoint,
- coordZ: [ 0, 0 ],
+ coordZ: [0, 0],
fixed: true,
normalStyle: {
stroke: BLUE,
@@ -179,7 +179,7 @@
});
centerPoint = addMovablePoint({
- coord: [ 0, 0 ],
+ coord: [0, 0],
constraints: {
fixed: true
},
@@ -190,11 +190,11 @@
}
});
- correctMinuteAngle = timeToDegrees( MINUTE );
- correctHourAngle = timeToDegrees( 5 * (HOUR + MINUTE/60) );
+ correctMinuteAngle = timeToDegrees(MINUTE);
+ correctHourAngle = timeToDegrees(5 * (HOUR + MINUTE / 60));
- correctMinuteAngle = roundToNearest( minuteSnapDegrees, correctMinuteAngle );
- correctHourAngle = roundToNearest( hourSnapDegrees, correctHourAngle );
+ correctMinuteAngle = roundToNearest(minuteSnapDegrees, correctMinuteAngle);
+ correctHourAngle = roundToNearest(hourSnapDegrees, correctHourAngle);
</div>
</div>
@@ -202,63 +202,104 @@
<div class="instruction">
Drag the two hands so the clock reads <var>HOUR</var>:<var>NICE_MINUTE</var>.
</div>
- <div class="guess">
- [ minutePoint.coord, hourPoint.coord ]
- </div>
+ <div class="guess">[minutePoint.coord, hourPoint.coord]</div>
<div class="validator-function">
+ var minuteAngle = cartToPolar(guess[0])[1];
+ var hourAngle = cartToPolar(guess[1])[1];
- var minuteAngle = cartToPolar( guess[0] )[1];
- var hourAngle = cartToPolar( guess[1] )[1];
-
- minuteAngle = roundToNearest( minuteSnapDegrees, minuteAngle );
- hourAngle = roundToNearest( hourSnapDegrees, hourAngle );
+ minuteAngle = roundToNearest(minuteSnapDegrees, minuteAngle);
+ hourAngle = roundToNearest(hourSnapDegrees, hourAngle);
// if hands have not been moved, return `""`
- if ( minuteAngle === minuteStartAngle &amp;&amp; hourAngle === hourStartAngle) {
+ if (minuteAngle === minuteStartAngle &amp;&amp; hourAngle === hourStartAngle) {
return "";
}
- if ((minuteAngle === correctHourAngle) && (hourAngle === correctMinuteAngle) ){
+ if ((minuteAngle === correctHourAngle) &amp;&amp; (hourAngle === correctMinuteAngle)) {
return "Remember the hour hand is the short hand and the minute hand is the long hand";
}
- else if ((minuteAngle === correctMinuteAngle) && (hourAngle !== correctHourAngle) &&(hourAngle === roundToNearest( hourSnapDegrees, timeToDegrees( 5 * (HOUR) )))) {
+ else if ((minuteAngle === correctMinuteAngle) &amp;&amp; (hourAngle !== correctHourAngle)
+ &amp;&amp; (hourAngle === roundToNearest(hourSnapDegrees, timeToDegrees(5 * HOUR)))) {
return "Remember the hour hand needs to move over the course of the hour";
}
return (minuteAngle === correctMinuteAngle) &amp;&amp; (hourAngle === correctHourAngle);
-
</div>
<div class="show-guess">
- minutePoint.moveTo( guess[0][0], guess[0][1], true );
- hourPoint.moveTo( guess[1][0], guess[1][1], true );
+ minutePoint.moveTo(guess[0][0], guess[0][1], true);
+ hourPoint.moveTo(guess[1][0], guess[1][1], true);
</div>
</div>
<div class="hints">
-
- <p>The <span class="hint_blue" style="font-weight: bold">hour</span> hand is the short <span class="hint_blue" style="font-weight: bold">blue</span> bar and the <span class="hint_orange" style="font-weight: bold">minute</span> hand is the long <span class="hint_orange" style="font-weight: bold">orange</span> bar.<p>
-
- <p>The number after the <code>\Large{:}</code> symbol represents the number of minutes past the hour. So <code><var>TIME</var></code> represents <code><var>MINUTE</var></code> minutes past hour <code><var>HOUR</var></code>.</p>
-
- <p>First, let's set the <span class="hint_orange" style="font-weight: bold">minute</span> hand.</p>
+ <p>
+ The <span class="hint_blue" style="font-weight: bold">hour</span> hand is the short
+ <span class="hint_blue" style="font-weight: bold">blue</span> bar and the
+ <span class="hint_orange" style="font-weight: bold">minute</span> hand is the long
+ <span class="hint_orange" style="font-weight: bold">orange</span> bar.
+ </p>
+
+ <p>
+ The number after the <code>\Large{:}</code> symbol represents the number of minutes past
+ the hour. So <code><var>TIME</var></code> represents <code><var>MINUTE</var></code>
+ minutes past hour <code><var>HOUR</var></code>.
+ </p>
+
+ <p>
+ First, let's set the <span class="hint_orange" style="font-weight: bold">minute</span> hand.
+ </p>
<div>
- <p>Each long tick mark is an increment of 5 minutes, because 60 minutes / 12 tick marks = 5 minutes per tick mark.</p>
- <p>Since we are <code><var>MINUTE</var></code> minutes past the hour, <span data-if="MINUTE_IS_ZERO">the minute hand should be at the mark numbered <code class="hint_orange">12</code>, which is the first tick mark on the clock and represents <code>0</code> minutes past the hour</span><span data-else>and there are 5 minutes per tick mark, the minute hand should be at the mark numbered <code class="hint_orange"><var>fraction(MINUTE, 5)</var> = <var>MINUTE/5</var></code></span>.</p>
+ <p>
+ Each long tick mark is an increment of 5 minutes, because
+ 60 minutes / 12 tick marks = 5 minutes per tick mark.
+ </p>
+ <p>
+ Since we are <code><var>MINUTE</var></code> minutes past the hour,
+ <span data-if="MINUTE_IS_ZERO">
+ the minute hand should be at the mark numbered
+ <code class="hint_orange">12</code>, which is the first tick mark on the clock
+ and represents <code>0</code> minutes past the hour
+ </span><span data-else>
+ and there are 5 minutes per tick mark, the minute hand should be at the mark numbered
+ <code class="hint_orange"><var>fraction(MINUTE, 5)</var> = <var>MINUTE/5</var></code>
+ </span>.
+ </p>
</div>
- <p>Next, let's set the <span class="hint_blue" style="font-weight: bold">hour</span> hand.</p>
+ <p>
+ Next, let's set the <span class="hint_blue" style="font-weight: bold">hour</span> hand.
+ </p>
<div>
<p>The 12 long tick marks correspond to the hours in the day (assuming AM/PM time).</p>
- <p>If it is <code>0</code> minutes, the hour hand belongs directly on the corresponding hour mark. But, over the hour, the hour hand must travel so it reaches the next hour by the time the hour changes.</p>
+ <p>
+ If it is <code>0</code> minutes past the hour, the hour hand belongs directly on the
+ corresponding hour mark. But, over the hour, the hour hand must travel so it reaches
+ the next hour by the time the hour changes.
+ </p>
</div>
<div>
<p data-if="MINUTE_IS_ZERO">
- Since it's <code><var>HOUR</var></code> hour<code><var>plural(HOUR)</var></code> and <code>0</code> minutes, the hour hand should be right on the <code class="hint_blue"><var>HOUR</var></code> hour mark.
+ Since it's <code>0</code> minutes past the hour, the hour hand should be right on the
+ <code class="hint_blue"><var>HOUR</var></code> hour mark.
</p>
<div data-else data-unwrap>
- <p>Since it's <code><var>HOUR</var></code> hour<var>plural(HOUR)</var> and <code><var>MINUTE</var></code> minutes, the hour hand will have traveled <code class="hint_blue"><var>fraction(MINUTE, 60)</var> = <var>fraction(MINUTE, 60, false, true)</var></code> of the way to the <code><span data-if="HOUR + 1 ===13">1</span><span data-else> <var>HOUR + 1</var></span></code> hour mark.</p>
- <p>So the hour hand needs to be placed <span data-if="MINUTE === 20">just before the second </span><span data-else-if="MINUTE === 40">just past the third </span><span data-else-if="MINUTE === 15">just past the first </span><span data-else-if="MINUTE === 30">between the second and third </span><span data-else="MINUTE === 45">just before the fourth </span> small tick mark past the <code class="hint_blue"><var>HOUR</var></code> hour mark.</p>
+ <p>
+ Since it's <code><var>MINUTE</var></code> minutes past the hour, the hour hand will have
+ traveled <code class="hint_blue"><var>fraction(MINUTE, 60)</var> =
+ <var>fraction(MINUTE, 60, false, true)</var></code> of the way to the
+ <code><span data-if="HOUR + 1 ===13">1</span><span data-else><var>HOUR + 1</var></span>
+ </code> hour mark.
+ </p>
+ <p>
+ So the hour hand needs to be placed
+ <span data-if="MINUTE === 20">just before the second
+ </span><span data-else-if="MINUTE === 40">just past the third
+ </span><span data-else-if="MINUTE === 15">just past the first
+ </span><span data-else-if="MINUTE === 30">between the second and third
+ </span><span data-else>just before the fourth </span>
+ small tick mark past the <code class="hint_blue"><var>HOUR</var></code> hour mark.
+ </p>
</div>
</div>
@@ -266,15 +307,15 @@
var minuteRadius = minutePoint.constraints.fixedDistance.dist;
var hourRadius = hourPoint.constraints.fixedDistance.dist;
- var minuteCoord = polar( minuteRadius, correctMinuteAngle );
- var hourCoord = polar( hourRadius, correctHourAngle );
+ var minuteCoord = polar(minuteRadius, correctMinuteAngle);
+ var hourCoord = polar(hourRadius, correctHourAngle);
var dotOpacity = 0.4;
var handOpacity = 0.3;
addMovableLineSegment({
coordA: minuteCoord,
- coordZ: [ 0, 0 ],
+ coordZ: [0, 0],
fixed: true,
normalStyle: {
stroke: ORANGE,
@@ -287,7 +328,7 @@
addMovableLineSegment({
coordA: minuteCoord,
- coordZ: [ 0, 0 ],
+ coordZ: [0, 0],
fixed: true,
normalStyle: {
stroke: ORANGE,
@@ -299,7 +340,7 @@
addMovableLineSegment({
coordA: hourCoord,
- coordZ: [ 0, 0 ],
+ coordZ: [0, 0],
fixed: true,
normalStyle: {
stroke: BLUE,
@@ -312,7 +353,7 @@
addMovableLineSegment({
coordA: hourCoord,
- coordZ: [ 0, 0 ],
+ coordZ: [0, 0],
fixed: true,
normalStyle: {
stroke: BLUE,
@@ -325,7 +366,7 @@
// for some reason this doesn't work, so for now, create another center point
// centerPoint.toFront();
addMovablePoint({
- coord: [ 0, 0 ],
+ coord: [0, 0],
constraints: {
fixed: true
},
Please sign in to comment.
Something went wrong with that request. Please try again.