Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

142 lines (130 sloc) 7.548 kB
<!DOCTYPE html>
<html data-require="math math-format expressions graphie interactive word-problems stat">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Creating bar charts 1</title>
<script src="../khan-exercise.js"></script>
<style>
span.rotate {
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}
body.ie span.rotate {
left: 60px !important;
top: 140px !important;
}
</style>
</head>
<body>
<div class="exercise">
<div class="problems">
<div>
<div class="vars">
<var id="SUBJECT">randFromArray([ "animal", "color", "fruit", "course" ])</var>
<var id="CATEGORIES">$.map( _.range(5), function( n ) { return ( KhanUtil[ SUBJECT ] )( n + 1 ); } )</var>
<var id="DATA">$.map( _.range(5), function() { return randRange( 0, 10 ); } )</var>
<var id="TOTAL">sum( DATA )</var>
<var id="RESPONDENT">randFromArray([ "student", "teacher", "person" ])</var>
</div>
<code><var>TOTAL</var></code> <var>plural( RESPONDENT, TOTAL )</var> were asked about their favorite <var>SUBJECT</var>.
<var>toSentence( shuffle( $.map( DATA, function( num, i ) {
return "&lt;code&gt;" + num + "&lt;/code&gt; " + plural( RESPONDENT, num ) + " said " + CATEGORIES[ i ];
}) ) )</var>.
<p class="question">Create a bar chart showing everyone's favorite <var>plural( SUBJECT )</var>:</p>
<div class="problem">
<div class="graphie" id="barchart">
init({
range: [ [ -2, 17 ], [ -3, 12 ] ],
scale: [ 26, 30 ]
});
addMouseLayer();
for ( var y = 1; y &lt;= 10; ++y ) {
label( [ 0, y ], y, "left", false );
style({ stroke: "#000", strokeWidth: 1, opacity: 0.3 }, function() {
line( [ 0, y ], [ 16, y ] )
});
}
graph.leftPoints = [];
graph.rightPoints = [];
graph.lines = [];
for ( var index = 0; index &lt; CATEGORIES.length; ++index ) {
graph.leftPoints[ index ] = addMovablePoint({ coord: [ index * 3 + 1, 0.5 ], visible: false });
graph.rightPoints[ index ] = addMovablePoint({ coord: [ index * 3 + 3, 0.5 ], visible: false });
graph.lines[ index ] = addMovableLineSegment({ pointA: graph.leftPoints[ index ], pointZ: graph.rightPoints[ index ], snapY: 0.5, constraints: { constrainX: true } });
// graph.lines[ index ] = {};
style({ stroke: "none", fill: "#9ab8ed", opacity: 1.0 }, function() {
graph.lines[ index ].bar = path([ [ index * 3 + 1, 0 ], [ index * 3 + 1, 0.5 ], [ index * 3 + 3, 0.5 ], [ index * 3 + 3, 0 ], [ index * 3 + 1, 0 ] ]);
});
// graph.lines[ index ].toFront();
label( [ index * 3 + 2, 0 ], CATEGORIES[ index ], "below", false ).css( "text-transform", "capitalize" );
var bar = index;
graph.lines[ index ].onMove = function( dX, dY ) {
if ( this.coordA[1] &lt; 0 || this.coordA[1] &gt; 10 ) {
this.coordA[1] -= dY;
this.coordZ[1] -= dY;
}
this.pointA.setCoord([ this.pointA.coord[0], this.coordA[1] ]);
this.pointZ.setCoord([ this.pointZ.coord[0], this.coordA[1] ]);
this.pointA.updateLineEnds();
this.pointZ.updateLineEnds();
this.bar.scale( 1, Math.max( 0.01, this.coordA[1] * 2 ), scalePoint( 0 )[0], scalePoint( 0 )[1] );
};
}
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 }, function() {
line( [ 0, 0 ], [ 16, 0 ] );
line( [ 0, 0 ], [ 0, 10 ] );
});
label( [ 8, -0.8 ], "&lt;b&gt;" + SUBJECT + "&lt;/b&gt;", "below", false ).css( "text-transform", "capitalize" );
$( label( [ -1.5, 5 ], "&lt;b&gt;Number of " + plural( RESPONDENT ) + "&lt;/b&gt;", "center", false ) ).addClass( "rotate" );
label( [ 8, 10.5 ], "&lt;b&gt;Favorite " + SUBJECT + "s&lt;/b&gt;", "above", false );
</div>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Create a bar chart by dragging the top of each bar up and down.
</div>
<div class="guess">$.map( new Array( 5 ), function( val, n ) { return graph.lines[ n ].coordA[1]; })</div>
<div class="validator-function">
if ( _.isEqual( guess, [ 0.5, 0.5, 0.5, 0.5, 0.5 ] ) ) {
return "";
}
return _.isEqual( guess, DATA );
</div>
<div class="show-guess">
$.each( guess, function( index ) {
graph.lines[ index ].pointA.setCoord([ graph.lines[ index ].pointA.coord[0], this ]);
graph.lines[ index ].pointZ.setCoord([ graph.lines[ index ].pointZ.coord[0], this ]);
graph.lines[ index ].pointA.updateLineEnds();
graph.lines[ index ].pointZ.updateLineEnds();
graph.lines[ index ].bar.scale( 1, Math.max( 0.01, this * 2 ), scalePoint( 0 )[0], scalePoint( 0 )[1] );
});
</div>
</div>
</div>
</div>
<div class="hints">
<div data-each="DATA as INDEX, NUM">
<p>
<code><var>NUM</var></code> <var>plural( RESPONDENT, NUM )</var> said <var>plural( randFromArray([ "his", "her" ]), "their", NUM )</var>
favorite <var>SUBJECT</var> was <var>CATEGORIES[ INDEX ]</var>.
<span data-if="NUM > 0">
So the top of the bar for "<span style="text-transform: capitalize"><var>CATEGORIES[ INDEX ]</var></span>" should line up with the number
<code><var>NUM</var></code> on the left side of the chart.
</span>
<span data-else>
So there should be no bar above "<span style="text-transform: capitalize"><var>CATEGORIES[ INDEX ]</var></span>". Drag the top of the bar all
the way to the bottom to get rid of the bar.
</span>
</p>
<div data-if="NUM > 0" class="graphie" data-update="barchart">
style({ stroke: ORANGE, fill: "none", strokeWidth: 1, strokeDasharray: "- " }, function() {
path([ [ INDEX * 3 + 1, 0 ], [ INDEX * 3 + 1, NUM ], [ INDEX * 3 + 3, NUM ], [ INDEX * 3 + 3, 0 ] ]).toBack();
});
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.