Permalink
Browse files

Add exercise: Ordering objects

Reviewers: emily

Reviewed By: emily

Differential Revision: http://phabricator.khanacademy.org/D129
  • Loading branch information...
1 parent d3772b0 commit 6b9b6354588545e6b9d7b3622dd851ce5d16c511 @beneater beneater committed Jun 1, 2012
@@ -14,6 +14,10 @@
.sol input {
width: 40px !important;
}
+ .sort-key {
+ visibility: hidden;
+ position: absolute;
+ }
</style>
</head>
<body>
@@ -98,6 +102,7 @@
<p>Order the following fractions from least to greatest:</p>
<ul id="sortable">
<li data-each="NUMS as NUM">
+ <span class="sort-key"><var>NUM[3]</var></span>
<code><var>NUM[3]</var></code>
</li>
</ul>
@@ -10,6 +10,10 @@
font-size: 1.7em;
text-align: center
}
+ .sort-key {
+ visibility: hidden;
+ position: absolute;
+ }
</style>
</head>
<body>
@@ -119,6 +123,7 @@
<p>Order the following fractions from least to greatest. </p>
<ul id="sortable">
<li data-each="NUMS as NUM">
+ <span class="sort-key"><var>NUM[ 5 ]</var></span>
<code><var>NUM[ 5 ]</var></code>
</li>
</ul>
@@ -10,6 +10,10 @@
font-size: 1.7em;
text-align: center
}
+ .sort-key {
+ visibility: hidden;
+ position: absolute;
+ }
</style>
</head>
<body>
@@ -62,6 +66,7 @@
<p>Order the following negative numbers from least to greatest:</p>
<ul id="sortable">
<li data-each="NUMS as NUM">
+ <span class="sort-key"><var>NUM[0]</var></span>
<code><var>NUM[0]</var></code>
</li>
</ul>
@@ -4,6 +4,12 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ordering numbers</title>
<script src="../khan-exercise.js"></script>
+ <style>
+ .sort-key {
+ visibility: hidden;
+ position: absolute;
+ }
+ </style>
</head>
<body>
<div class="exercise">
@@ -79,6 +85,7 @@
<p>Order the following numbers from least to greatest:</p>
<ul id="sortable">
<li data-each="NUMS as NUM">
+ <span class="sort-key"><var>NUM[2]</var></span>
<code><var>NUM[2]</var></code>
</li>
</ul>
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html data-require="math graphie word-problems interactive">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <title>Ordering objects</title>
+ <script src="../khan-exercise.js"></script>
+ <style>
+ .sortable {
+ padding: 13px;
+ }
+
+ .sortable > ul > li {
+ background-color: #eee;
+ border: 1px solid #eee;
+ width: 110px;
+ height: 110px;
+ }
+ .sort-key {
+ visibility: hidden;
+ position: absolute;
+ }
+ </style>
+</head>
+<body>
+ <div class="exercise">
+ <div class="vars">
+ <var id="SHAPE">randFromArray(["square", "circle", "triangle"])</var>
+ <var id="COLORS">shuffle(["#aec6f4", "#fdcf76", "#8ed4b8", "#fd79d4"])</var>
+ <var id="DRAW">{}</var>
+ <var id="SORTER">createSorter()</var>
+ </div>
+
+ <p class="question"></p>
+
+ <div class="problem">
+ <div class="graphie">
+ DRAW.square = function(x, y, size, color) {
+ KhanUtil.currentGraph.path([[x - size, y + size], [x + size, y + size], [x + size, y - size],
+ [x - size, y - size], true ],
+ { strokeWidth: 2, stroke: "black", fill: color });
+ };
+ DRAW.circle = function(x, y, size, color) {
+ KhanUtil.currentGraph.circle([x, y], size, { strokeWidth: 2, stroke: "black", fill: color });
+ };
+ DRAW.triangle = function(x, y, size, color) {
+ KhanUtil.currentGraph.path([[x, y + size], [x + (2 * size) / sqrt(3), y - size / sqrt(3)],
+ [x - (2 * size) / sqrt(3), y - size / sqrt(3)], true],
+ { strokeWidth: 2, stroke: "black", fill: color });
+ };
+ </div>
+ <ul id="sortable">
+ <li data-each="SIZES as I, SIZE">
+ <span class="sort-key"><var>SIZE</var></span>
+ <div class="graphie add-unique-id">
+ $(".add-unique-id").eq(I).attr("id", "unique-" + I);
+ init({ range: [[-11, 11], [-11, 11]], scale: [5, 5] });
+ DRAW[SHAPE](0, 0, SIZE, COLORS[I]);
+ </div>
+ </li>
+ </ul>
+ <var>SORTER.init("sortable")</var>
+ </div>
+
+ <div class="problems">
+ <div id="small-to-large">
+ <div class="vars" data-apply="appendVars">
+ <var id="SIZES" data-ensure="SIZES.join(',') !== sortNumbers(SIZES).join(',')">
+ shuffle([4, 5, 6, 7, 8, 9], 4)
+ </var>
+ <var id="SOLUTION">_.map(sortNumbers(SIZES), function(el) {
+ return "ABCD"[_.indexOf(SIZES, el)];
+ })</var>
+ </div>
+
+ <p class="question">
+ Order the <var>plural(SHAPE)</var> from smallest to largest:
+ </p>
+
+ <div class="solution" data-type="custom">
+ <div class="instruction">
+ Drag the <var>plural(SHAPE)</var> left and right so they are in order from smallest to largest
+ </div>
+ <div class="guess">SORTER.getContent()</div>
+ <div class="validator-function">
+ return guess.join(",") === SIZES.sort().join(",");
+ </div>
+ <div class="show-guess">
+ SORTER.setContent(guess);
+ </div>
+ </div>
+
+ <div class="hints">
+ <div data-each="sortNumbers(SIZES) as I, SIZE">
+ <div data-if="I === 0" class="graphie">
+ _(4).times(function(i) {
+ $("#unique-" + i).data("graphie").label([0, 0], "ABCD"[i]);
+ });
+ </div>
+ <p>
+ The
+ <span data-if="I === 0">smallest</span>
+ <span data-else-if="I === SIZES.length - 1">largest</span>
+ <span data-else>next smallest</span>
+ is <var>SHAPE</var> <code><var>"ABCD"[_.indexOf(SIZES, SIZE)]</var>
+ </code><span data-if="I === 0">, so it goes on the left</span><span data-else-if="I === SIZES.length - 1">, so it goes on the right</span>.
+ </p>
+
+ <div class="graphie">
+ init({ range: [[-11, 80], [-11, 11]], scale: [5, 5] });
+ var x = 0;
+ _.each(_.first(sortNumbers(SIZES), I + 1), function(size, i) {
+ DRAW[SHAPE](x, 0, size, COLORS[_.indexOf(SIZES, size)]);
+ label([x, 0], "ABCD"[_.indexOf(SIZES, size)]);
+ x += 22;
+ });
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="large-to-small">
+ <div class="vars" data-apply="appendVars">
+ <var id="SIZES" data-ensure="SIZES.join(',') !== sortNumbers(SIZES).reverse().join(',')">
+ shuffle([4, 5, 6, 7, 8, 9], 4)
+ </var>
+ <var id="SOLUTION">_.map(sortNumbers(SIZES).reverse(), function(el) {
+ return "ABCD"[_.indexOf(SIZES, el)];
+ })</var>
+ </div>
+
+ <p class="question">
+ Order the <var>plural(SHAPE)</var> from largest to smallest:
+ </p>
+
+ <div class="solution" data-type="custom">
+ <div class="instruction">
+ Drag the <var>plural(SHAPE)</var> left and right so they are in order from largest to smallest
+ </div>
+ <div class="guess">SORTER.getContent()</div>
+ <div class="validator-function">
+ return guess.join(",") === SIZES.sort().reverse().join(",");
+ </div>
+ <div class="show-guess">
+ SORTER.setContent(guess);
+ </div>
+ </div>
+
+ <div class="hints">
+ <div data-each="sortNumbers(SIZES).reverse() as I, SIZE">
+ <div data-if="I === 0" class="graphie">
+ _(4).times(function(i) {
+ $("#unique-" + i).data("graphie").label([0, 0], "ABCD"[i]);
+ });
+ </div>
+ <p>
+ The
+ <span data-if="I === 0">largest</span>
+ <span data-else-if="I === SIZES.length - 1">smallest</span>
+ <span data-else>next largest</span>
+ is <var>SHAPE</var> <code><var>"ABCD"[_.indexOf(SIZES, SIZE)]</var>
+ </code><span data-if="I === 0">, so it goes on the left</span><span data-else-if="I === SIZES.length - 1">, so it goes on the right</span>.
+ </p>
+
+ <div class="graphie">
+ init({ range: [[-11, 80], [-11, 11]], scale: [5, 5] });
+ var x = 0;
+ _.each(_.first(sortNumbers(SIZES).reverse(), I + 1), function(size, i) {
+ DRAW[SHAPE](x, 0, size, COLORS[_.indexOf(SIZES, size)]);
+ label([x, 0], "ABCD"[_.indexOf(SIZES, size)]);
+ x += 22;
+ });
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -1204,6 +1204,7 @@ $.extend(KhanUtil, {
$(tile).addClass("dragging");
var tileIndex = $(this).index();
placeholder.insertAfter(tile);
+ placeholder.width($(tile).width());
$(this).css("z-index", 100);
var offset = $(this).offset();
var click = {
@@ -1215,6 +1216,7 @@ $.extend(KhanUtil, {
left: offset.left,
top: offset.top
});
+
$(document).bind("vmousemove vmouseup", function(event) {
event.preventDefault();
if (event.type === "vmousemove") {
@@ -1223,7 +1225,18 @@ $.extend(KhanUtil, {
top: event.pageY - click.top
});
var leftEdge = list.offset().left;
- var index = Math.max(0, Math.min(numTiles - 1, Math.floor((event.pageX - leftEdge) / tileWidth)));
+ var midWidth = $(tile).offset().left - leftEdge;
+ var index = 0;
+ var sumWidth = 0;
+ list.find("li").each(function() {
+ if (this === placeholder[0] || this === tile) {
+ return;
+ }
+ if (midWidth > sumWidth + $(this).outerWidth(true) / 2) {
+ index += 1;
+ }
+ sumWidth += $(this).outerWidth(true);
+ });
if (index !== tileIndex) {
tileIndex = index;
if (index === 0) {
@@ -1236,12 +1249,11 @@ $.extend(KhanUtil, {
placeholder.insertAfter(preceeding);
$(tile).insertAfter(preceeding);
}
- offset.left = leftEdge + tileWidth * index;
}
} else if (event.type === "vmouseup") {
$(document).unbind("vmousemove vmouseup");
var position = $(tile).offset();
- $(position).animate(offset, {
+ $(position).animate(placeholder.offset(), {
duration: 150,
step: function(now, fx) {
position[fx.prop] = now;
@@ -1264,18 +1276,20 @@ $.extend(KhanUtil, {
sorter.getContent = function() {
content = [];
list.find("li").each(function(tileNum, tile) {
- content.push($.trim($(tile).find("code").text()));
+ content.push($.trim($(tile).find(".sort-key").text()));
});
return content;
};
sorter.setContent = function(content) {
- list.find("li").each(function(tileNum, tile) {
- $(tile).find("code").text(content[tileNum]);
- MathJax.Hub.Queue(["Reprocess", MathJax.Hub, tile]);
+ var tiles = [];
+ $.each(content, function(n, sortKey) {
+ tiles.push(list.find("li .sort-key:contains('" + sortKey + "')").closest("li").get(0));
});
+ list.append(tiles);
};
+
return sorter;
}

0 comments on commit 6b9b635

Please sign in to comment.