{{ message }}

# New exercise: Interactive telling time #8913

Merged
merged 42 commits into from Jan 3, 2012
Merged

# New exercise: Interactive telling time#8913

merged 42 commits into from Jan 3, 2012

## Conversation

### stephjang commented Dec 18, 2011

Trello bug: "Telling time, interactive" in "Queued up"
Feedback much appreciated!

## CHANGED

### telling_time_interactive.html

• "Set the clock to 3:45". User moves clock hands accordingly.
• Hints might need some editing from a more experienced hint-writer.

### time.js

• Copied and extended analogClock() from graphie-helpers.js to a more customizable addAnalogClock() function (modeled after addMovablePoint()) inside time.js
• NOTE: the functions coordToDegrees() and degreesToCoord() may belong in other packages. Any ideas where?
• NOTE: roundToNearest() belongs in math.js. See below.

### interactive.js

• Added a snapPoints option to movablePoint.constraints.fixedDistance to allow snapping around a circle (fixedDistance restricts the point's motion to a circle). snapPoints is the number of points that can be snapped to around the circle.
• NOTE: to implement this functionality, there is a bit of redundancy with functions in angles.js and time.js, but this might be unavoidable since interactive.js may be used without the others.

## NO CHANGE CURRENTLY, BUT SHOULD CHANGE

### telling_time.html & telling_time_0.5.html

• NOTE: should be updated using new time.js package (if accepted)

### math.js

• NOTE: I tried to add roundToNearest() (currently in time.js) to math.js but for some reason I couldn't get it to work. Something about how math.js is compiled? Is it a special file compared to the others?

### graphie-helpers.js

• NOTE: if time.js is accepted and telling_time.html & telling_time_0.5.html are updated, we should remove the analogClock() function from here.
added 6 commits Dec 18, 2011
…, added fixedDistance snap to interactive.js
…ng-time

### stephjang commented Dec 18, 2011

 Oh dang, I just saw that someone else attempted this already: #6362. But it seems they didn't finish...

### stephjang commented Dec 18, 2011

 Whoops, I didn't mean to commit the changes to unit_circle.html or to graphie-helpers.js...
…sions

### mwahl commented Dec 19, 2011

 Nice exercise @stchangg!! Great addition to the time setting series. Will be mentioning a few minor suggestions - will take a deeper look in the next few days.

randRange( 1, 12 )

#### mwahl Dec 19, 2011 Contributor

Time should never === 1:00 [default time shown on clock] - data-ensure should make sure this won't happen

#### stephjang Dec 23, 2011 Author Contributor

Just made this change... not entirely sure that this is the right way to use data-ensure, but after checking the other exercises, it seems OK to me.

#### Christi Jan 1, 2012 Contributor

what if you had the clock randomly set to a time and make sure it doesn't match what the user is supposed to set it to? The idea of eliminating one time from the set seems wrong. Or you could make having the time match the answer a gimme



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.

#### mwahl Dec 19, 2011 Contributor

Suggest: "The number before the :</b represents the hour, and the number after the : represents the number of minutes past the hours. So [time] represents MINUTES past the HOUR."

#### stephjang Dec 23, 2011 Author Contributor

Revised. =)



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.

#### mwahl Dec 19, 2011 Contributor

I'd recommend re-architecting the hints section to 1) set the minutes hand and b) set the hour hand. Think the largest point of confusion here is mis-positioning the hour hand to account for minutes. If we can first set the minute hand (independent of the hour hand), and then set the hour hand (dependent on the minute hand), we can change lives!

For example:

First, let's set the minute hand.

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

Since we are MINUTES past the hour, the minute hand should be at MINUTES/12

Next, let's set the hour hand...

#### stephjang Dec 23, 2011 Author Contributor

Thanks for these suggestions. I somehow managed to make a simple concept complicated. By the way... the minute hand should be at MINUTES / 5. Is the hint misleading? Any further suggestions for how to make it clearer?



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}.

#### mwahl Dec 19, 2011 Contributor

Not sure if I'd ever perfectly set the clock so that a student can just click "check answer" to move on from the problem. Think all of the value is in actually moving the clock around.

Perhaps we could have clock hands appear in the right place (w/ opacity ~0.5) to suggest the user move the hands to that place?

#### stephjang Dec 23, 2011 Author Contributor

Good idea! I just added the hint hands...

added 12 commits Dec 23, 2011
…ng-time
…blem
 graph.minuteSnapDegrees = 360 / minuteSnapPoints; graph.hourSnapDegrees = 360 / hourSnapPoints; graph.clock = KhanUtil.addAnalogClock( { radius: clockRadius, minuteTicks: hourSnapPoints } );

#### beneater Dec 28, 2011 Contributor

Within a graphie div like this, you shouldn't have to prefix stuff with KhanUtil

#### stephjang Dec 28, 2011 Author Contributor

Oh, did not realize. Removed them. Question: does this also apply to the "validator-function" div, or do I need to use KhanUtil there?

#### beneater Dec 28, 2011 Contributor

Nope. You shouldn't need it in validator-function either. Generally if you need to reference KhanUtil it anywhere in the html file, something is probably wrong.

 }, onMove: function( x, y ) { return movePartnerPoint( { x: x, y: y, point: this, outerPoint: graph.outerMinutePoint, isOuterPoint: false } ); }

#### beneater Dec 28, 2011 Contributor

Oh cool! I didn't realize you can grab the end of the hands as well as the outer point.

#### stephjang Dec 28, 2011 Author Contributor

Yeah! I'm glad you like. =)

 }, normalStyle: { fill: KhanUtil.BLUE, stroke: KhanUtil.BLUE

#### beneater Dec 28, 2011 Contributor

again, don't need KhanUtil in here

 highlightStyle: { fill: KhanUtil.BLUE, stroke: KhanUtil.BLUE }

#### beneater Dec 28, 2011 Contributor

more KhanUtil.. you get the idea :)

### stephjang commented Dec 28, 2011

 I modified the hints and felt that the plural() function from word-problems.js could make them a bit smoother. However, will this affect load time/performance, since this exercise includes so many modules now? The full list is: math math-format graphie interactive angles time word-problems
added 5 commits Dec 29, 2011
…ng-time
…e.js

### stephjang commented Dec 29, 2011

 I'm pretty sure I made all of the latest requested changes. Let me know if there's anything left!
added 6 commits Dec 31, 2011
…ng-time
… graph. prefix from variables in telling_time_interactive
hint

### stephjang commented Jan 1, 2012

 @beneater I refactored the other time exercises and removed the old time code from graphie-helpers. :)
 if ( this.showLabels ) { this.drawLabels(); } if ( this.hour && this.minute ) {

#### beneater Jan 1, 2012 Contributor

This should probably be if ( this.hour !== undefined && this.minute !== undefined ) {, so this doesn't happen.

#### stephjang Jan 2, 2012 Author Contributor

Whoops, fixed this.

added 2 commits Jan 2, 2012
…ng-time
 if ( this.showLabels ) { this.drawLabels(); } if ( this.hour !== undefined && this.minute !== undefined ) {

#### beneater Jan 3, 2012 Contributor

hrm.. i just noticed it's drawing the hands at 12:00 in the interactive exercise now, so maybe these are defined but some other kind of falsey value? Haven't looked through to see exactly what's going on (you can probably figure it out faster than me), but something about this check isn't working right in the interactive version.

#### stephjang Jan 3, 2012 Author Contributor

Oh sorry, I made the change too hastily. This probably should be checking for false, not undefined, since I set default values for those params to false when instantiating the analogClock object. Just pushed the fix.

 hourAngle = roundToNearest( hourSnapDegrees, hourAngle ); // if hands have not been moved, return "" if ( minuteAngle === minuteStartAngle && hourAngle ==== hourStartAngle) {

==== -> ===

#### stephjang Jan 3, 2012 Author Contributor

Oops, fixed.

added 2 commits Jan 3, 2012
…ng-time
…ues instead of undefined before drawing hands in time.js

### beneater commented Jan 3, 2012

 Awesome! This is a really great exercise! Looking forward to seeing many more :) As I mentioned before, it might be another week or so before it goes live since Matt's out of town :(
added a commit that referenced this pull request Jan 3, 2012
New exercise: Interactive telling time
merged commit 4cde86f into Khan:master Jan 3, 2012
mentioned this pull request Jan 3, 2012

### mwahl commented Jan 3, 2012

 Thanks @stchangg for rocking this - very slick. Will let you know when we push live later this week/weekend!
Projects
None yet

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.