Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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
Copy link
Contributor

@stephjang 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.

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.
@stephjang
Copy link
Contributor Author

@stephjang 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
Copy link
Contributor Author

@stephjang stephjang commented Dec 18, 2011

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

@mwahl
Copy link
Contributor

@mwahl 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.

<div id="set-hands" data-weight="3">

<div class="vars">
<var id="HOUR">randRange( 1, 12 )</var>

This comment has been minimized.

@mwahl

mwahl Dec 19, 2011
Contributor

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

This comment has been minimized.

@stephjang

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.

This comment has been minimized.

@Christi

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


<div class="hints">

<p>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 <var>HOUR</var> hours and <var>MINUTE</var> minutes.</p>

This comment has been minimized.

@mwahl

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

This comment has been minimized.

@stephjang

stephjang Dec 23, 2011
Author Contributor

Revised. =)


<p>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 <var>HOUR</var> hours and <var>MINUTE</var> minutes.</p>

<div>

This comment has been minimized.

@mwahl

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

This comment has been minimized.

@stephjang

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?

<p data-else>
The hour hand should be <code>\Large{ \frac{<var>MINUTE</var>}{60} = \frac{<var>MINUTE_FRACTION[0]</var>}{<var>MINUTE_FRACTION[1]</var>} }</code> of the way past the <var>HOUR</var> hour mark. The minute hand should be at the tick mark labeled <code>\Large{ \frac{<var>MINUTE</var>}{5} = <var>MINUTE/5</var>}</code>.
</p>
<div class="graphie" data-update="clock">

This comment has been minimized.

@mwahl

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?

This comment has been minimized.

@stephjang

stephjang Dec 23, 2011
Author Contributor

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

graph.minuteSnapDegrees = 360 / minuteSnapPoints;
graph.hourSnapDegrees = 360 / hourSnapPoints;

graph.clock = KhanUtil.addAnalogClock( { radius: clockRadius, minuteTicks: hourSnapPoints } );

This comment has been minimized.

@beneater

beneater Dec 28, 2011
Contributor

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

This comment has been minimized.

@stephjang

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?

This comment has been minimized.

@beneater

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 } );
}

This comment has been minimized.

@beneater

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.

This comment has been minimized.

@stephjang

stephjang Dec 28, 2011
Author Contributor

Yeah! I'm glad you like. =)

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

This comment has been minimized.

@beneater

beneater Dec 28, 2011
Contributor

again, don't need KhanUtil in here

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

This comment has been minimized.

@beneater

beneater Dec 28, 2011
Contributor

more KhanUtil.. you get the idea :)

@stephjang
Copy link
Contributor Author

@stephjang 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

@stephjang
Copy link
Contributor Author

@stephjang 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!

@stephjang
Copy link
Contributor Author

@stephjang 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 ) {

This comment has been minimized.

@beneater

beneater Jan 1, 2012
Contributor

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

This comment has been minimized.

@stephjang

stephjang Jan 2, 2012
Author Contributor

Whoops, fixed this.

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

This comment has been minimized.

@beneater

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.

This comment has been minimized.

@stephjang

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 &amp;&amp; hourAngle ==== hourStartAngle) {

This comment has been minimized.

@beneater

beneater Jan 3, 2012
Contributor

==== -> ===

This comment has been minimized.

@stephjang

stephjang Jan 3, 2012
Author Contributor

Oops, fixed.

Stephanie H. Chang added 2 commits Jan 3, 2012
@beneater
Copy link
Contributor

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

beneater added a commit that referenced this pull request Jan 3, 2012
New exercise: Interactive telling time
@beneater beneater merged commit 4cde86f into Khan:master Jan 3, 2012
@mwahl
Copy link
Contributor

@mwahl mwahl commented Jan 3, 2012

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

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