# Khan/khan-exercises

refactored telling_time_interactive, extracted analogClock to time.js…

…, added fixedDistance snap to interactive.js
1 parent 368284e commit bcc1b9deebda28fed6cc364ee047d375a8fd3f32 stephjang committed Dec 18, 2011
32 exercises/telling_time.html
 @@ -23,15 +23,31 @@

What time is it?

-
- init({ range: [ [-4, 4 ], [ -4, 4] ], scale: 25 }); - PIECH = new analogClock( HOUR, MINUTE, 3.5, false ); - PIECH.draw(); -
-
- init({ range: [ [-5, 5], [-3, 3] ], scale: 25 }); +
+ + + init({ + range: [ [-5, 5], [-5, 5] ] + }); + + addMouseLayer(); + + graph.point = addMovablePoint({ + coord: [-4, 0] + }); + + graph.line = addMovableLineSegment({ + pointA: graph.point, + coordZ: [0, 0] + }); +
-
+

The time is HOUR : NICE_MINUTE AM_PM

267 exercises/telling_time_interactive.html
 @@ -0,0 +1,267 @@ + + + + + Telling time, interactive + + + +
+
+
+ +
+ randRange( 1, 12 ) + 15 + randRange( 0, 60 / MINUTE_INCREMENT - 1 ) * MINUTE_INCREMENT + MINUTE === 0 + KhanUtil.toFraction(MINUTE/60) + MINUTE > 5 ? MINUTE : "0" + MINUTE +
+ +

Set the clock to HOUR:NICE_MINUTE. The hour hand is blue and the minute hand is orange.

+ +
+ +
+
+ +
+
+ Drag the two hands so the clock reads HOUR:NICE_MINUTE. +
+
+ [ graph.minutePoint.coord, graph.hourPoint.coord ] +
+
+ + var minuteAngle = KhanUtil.coordToDegrees( graph.minutePoint.coord ); + var hourAngle = KhanUtil.coordToDegrees( graph.hourPoint.coord ); + + minuteAngle = KhanUtil.roundToNearest( graph.minuteSnapDegrees, minuteAngle ); + hourAngle = KhanUtil.roundToNearest( graph.hourSnapDegrees, hourAngle ); + + return (minuteAngle == graph.correctMinuteAngle) && (hourAngle == graph.correctHourAngle); + +
+
+ graph.minutePoint.moveTo( guess[0][0], guess[0][1], true ); + graph.hourPoint.moveTo( guess[1][0], guess[1][1], true ); +
+
+ +
+ +

The first part of the time is the hour. The second part of the time is the number of minutes past the hour. So, it is HOUR hours and MINUTE minutes.

+ +
+

The 12 long tick marks correspond to the hours in the day (assuming AM/PM time).

+

Each long tick mark is also an increment of 5 minutes, because 60 minutes / 12 tick marks = 5 minutes per tick mark.

+
+ graph.clock.drawTicks( { n: 12, p: 0.8, tickAttr: { stroke: "#ff0", "stroke-opacity": 0.3, "stroke-linecap": "round" } } ); +
+
+ +
+

Multiply each long tick mark by 5 to get the corresponding number of minutes. For example, the tick mark labeled "9" corresponds to 45 minutes. The tick mark labeled "12" is an exception; it corresponds to 0 minutes.

+
+ +
+

If it is zero minutes, the hour hand belongs directly on the corresponding hour mark. However, for any other number of minutes, the hour hand should be proportionally past the hour mark.

+

For example, if it's 5 hours and 45 minutes, the hour hand should be \Large{ \frac{45}{60} = \frac{3}{4} } of the way past the 5 hour mark.

+
+ +
+

+ The hour hand should be exactly at the HOUR hour mark. The minute hand should be at the tick mark labeled "12". +

+

+ The hour hand should be \Large{ \frac{MINUTE}{60} = \frac{MINUTE_FRACTION[0]}{MINUTE_FRACTION[1]} } of the way past the HOUR hour mark. The minute hand should be at the tick mark labeled \Large{ \frac{MINUTE}{5} = MINUTE/5}. +

+
+ + var minuteRadius = graph.minutePoint.constraints.fixedDistance.dist; + var hourRadius = graph.hourPoint.constraints.fixedDistance.dist; + + var minuteCoord = KhanUtil.degreesToCoord( minuteRadius, graph.correctMinuteAngle ); + var hourCoord = KhanUtil.degreesToCoord( hourRadius, graph.correctHourAngle ); + + graph.minutePoint.moveTo( minuteCoord[0], minuteCoord[1], true ); + graph.hourPoint.moveTo( hourCoord[0], hourCoord[1], true ); + +
+
+ +
+
+ +
+
+ 20 +
+
+ +
+
+ 30 +
+
+
+
+ +
2 exercises/unit_circle.html
 @@ -30,7 +30,7 @@ Move the orange point around the unit circle and select an angle in order to find the FNNAME value above.

- initUnitCircle( DEGREES ); + initUnitCircle( false );
5 utils/angles.js
 @@ -23,6 +23,11 @@ jQuery.extend( KhanUtil, { toRadians: function( degrees ) { return degrees * Math.PI / 180; }, + + // Convert a radian value to a degree value + toDegrees: function( radians ) { + return radians * 180 / Math.PI; + }, wrongCommonAngle: function( angleIdx, i ) { // i is a value from 1 to 3
3 utils/graphie-helpers.js
 @@ -462,7 +462,7 @@ function analogClock( hour, minute, radius, labelShown ){ this.minute = minute; this.radius = radius; this.set = KhanUtil.currentGraph.raphael.set(); - + this.graph = KhanUtil.currentGraph; this.draw = function(){ for( var x = 0; x < 12; x++ ){ @@ -488,7 +488,6 @@ function analogClock( hour, minute, radius, labelShown ){ }; } - // for line graph intuition function updateEquation() { var graph = KhanUtil.currentGraph;
42 utils/interactive.js