New exercise: Interactive telling time #8913

stephjang · 2011-12-18T10:47:23Z

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.

angle.js

Added toDegrees() function

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 fixedDistance snap to interactive.js

…ng-time

stephjang · 2011-12-18T10:54:52Z

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

stephjang · 2011-12-18T20:33:27Z

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

…sions

mwahl · 2011-12-19T06:56:00Z

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.

mwahl · 2011-12-19T06:57:04Z

exercises/telling_time_interactive.html

+      <div id="set-hands" data-weight="3">
+
+        <div class="vars">
+          <var id="HOUR">randRange( 1, 12 )</var>


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

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.

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

…ng-time

…blem

beneater · 2011-12-28T01:08:23Z

exercises/telling_time_interactive.html

+            graph.minuteSnapDegrees = 360 / minuteSnapPoints;
+            graph.hourSnapDegrees = 360 / hourSnapPoints;
+
+            graph.clock = KhanUtil.addAnalogClock( { radius: clockRadius, minuteTicks: hourSnapPoints } );


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

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

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.

stephjang · 2011-12-28T09:05:41Z

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

…ng-time

…e.js

stephjang · 2011-12-29T22:01:13Z

I'm pretty sure I made all of the latest requested changes. Let me know if there's anything left!

…ng-time

… graph. prefix from variables in telling_time_interactive

hint

stephjang · 2012-01-01T00:39:18Z

@beneater I refactored the other time exercises and removed the old time code from graphie-helpers. :)

beneater · 2012-01-01T21:58:05Z

utils/time.js

+			if ( this.showLabels ) {
+				this.drawLabels();
+			}
+			if ( this.hour && this.minute ) {


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

Whoops, fixed this.

…ng-time

beneater · 2012-01-03T00:17:10Z

utils/time.js

+			if ( this.showLabels ) {
+				this.drawLabels();
+			}
+			if ( this.hour !== undefined && this.minute !== undefined ) {


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.

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.

…ng-time

…ues instead of undefined before drawing hands in time.js

beneater · 2012-01-03T00:54:03Z

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 :(

New exercise: Interactive telling time

mwahl · 2012-01-03T11:14:03Z

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

stephjang added 6 commits December 18, 2011 02:12

refactored telling_time_interactive, extracted analogClock to time.js…

bcc1b9d

…, added fixedDistance snap to interactive.js

Merge remote-tracking branch 'upstream/master' into interactive-telli…

bc5eb7e

…ng-time

updated comment in interactive.js

e611b59

revert to original telling time

9935161

fixed mistaken code deletion in time.js

2d057df

revert again to original telling time

3922231

reverted unit_circle.html and graphie-helpers.js back to original ver…

94b77c5

…sions

mwahl reviewed Dec 19, 2011
View reviewed changes

stephjang added 12 commits December 22, 2011 21:05

Merge remote-tracking branch 'upstream/master' into interactive-telli…

ed476ff

…ng-time

added final hint hands

9c1d38c

prettified hint hands

39f1ae0

refactored fraction code using math-format fraction() func

d81759c

fixed the first hint

fb40921

refactored fraction code w/ math-format.js func, improved hints

f484892

split up hints

2dcacc9

data ensure that default hand placement is never selected for the pro…

ad661fb

…blem

reverted word problems back to unaltered version

8bd5392

split up last hint and used color coding in hints

706092a

changed title to 'Setting time'

62346cc

removed comma from time.js

7336f26

beneater reviewed Dec 28, 2011
View reviewed changes

stephjang added 4 commits December 28, 2011 00:03

converted spaces to tabs in telling_time_interactive.html

c002c0c

Fixed little bugs or formatting in telling_time_interactive.html

3229980

removed confusing hint and color-coded 'hour' and 'minute' in question

9556714

clarified hints and color-co added color coding

d1320f6

stephjang added 5 commits December 29, 2011 11:44

Merge remote-tracking branch 'upstream/master' into interactive-telli…

d8bc6ea

…ng-time

removed KhanUtil from validator-function div

05fa3e5

refactored coordToDegrees to crees to cartToPolar and moved to graphi…

60fb7b7

…e.js

wrapped all involved varialbes wiables within data-ensure div

e6f93ca

if hands have not been moved, return empty string

2edeacb

stephjang added 6 commits December 31, 2011 15:50

Merge remote-tracking branch 'upstream/master' into interactive-telli…

c38ff27

…ng-time

renamed labelShown to showLabel in time.js

212f8d3

refactored telling_time and telling_time_0.5 to use time.js & removed…

b9fca4c

… graph. prefix from variables in telling_time_interactive

removed analogClock() function from graphie-helpers.js

073da29

used <code> tags for hour and minute numbers in hints

7ef3280

removed unnecessary code tag in hint

89e488a

hint

beneater reviewed Jan 1, 2012
View reviewed changes

stephjang added 2 commits January 2, 2012 01:23

Merge remote-tracking branch 'upstream/master' into interactive-telli…

3b2a82a

…ng-time

revisecheck for undefined instead of truthiness in time.js

cdeab0f

beneater reviewed Jan 3, 2012
View reviewed changes

Stephanie H. Chang added 2 commits January 2, 2012 16:38

Merge remote-tracking branch 'upstream/master' into interactive-telli…

9490fbb

…ng-time

fixed ==== typo in telling_time_interactive.html; check for false val…

151ccdd

…ues instead of undefined before drawing hands in time.js

beneater added a commit that referenced this pull request Jan 3, 2012

Merge pull request #8913 from stchangg/interactive-telling-time

4cde86f

New exercise: Interactive telling time

beneater merged commit 4cde86f into Khan:master Jan 3, 2012

beneater mentioned this pull request Jan 3, 2012

Interactive time-telling #6362

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New exercise: Interactive telling time #8913

New exercise: Interactive telling time #8913

stephjang commented Dec 18, 2011

stephjang commented Dec 18, 2011

stephjang commented Dec 18, 2011

mwahl commented Dec 19, 2011

mwahl Dec 19, 2011

stephjang Dec 23, 2011

Christi Jan 1, 2012

beneater Dec 28, 2011

stephjang Dec 28, 2011

beneater Dec 28, 2011

stephjang commented Dec 28, 2011

stephjang commented Dec 29, 2011

stephjang commented Jan 1, 2012

beneater Jan 1, 2012

stephjang Jan 2, 2012

beneater Jan 3, 2012

stephjang Jan 3, 2012

beneater commented Jan 3, 2012

mwahl commented Jan 3, 2012

New exercise: Interactive telling time #8913

New exercise: Interactive telling time #8913

Conversation

stephjang commented Dec 18, 2011

CHANGED

telling_time_interactive.html

time.js

interactive.js

angle.js

NO CHANGE CURRENTLY, BUT SHOULD CHANGE

telling_time.html & telling_time_0.5.html

math.js

graphie-helpers.js

stephjang commented Dec 18, 2011

stephjang commented Dec 18, 2011

mwahl commented Dec 19, 2011

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephjang commented Dec 28, 2011

stephjang commented Dec 29, 2011

stephjang commented Jan 1, 2012

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beneater commented Jan 3, 2012

mwahl commented Jan 3, 2012