Permalink
Fetching contributors…
Cannot retrieve contributors at this time
278 lines (261 sloc) 14 KB
<!DOCTYPE html>
<html data-require="word-problems interactive graphie">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Conditional statements</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<script>
var addColor = function(color, element) {
if (color === 1) {
element.addClass("set-blue");
} else if (color === 2) {
element.addClass("set-green");
}
}
var makeDisplay = function(str) {
var color = 0;
if (_.isArray(str)) {
color = str[1];
str = str[0];
}
var s = str.split(" ");
var disp = $("<div>");
if (s.length > 2) {
// add a linebreak after the middle word
s.splice(((s.length + 1) / 2) | 0, 0, "<br>");
} else {
// otherwise, increase the line height
disp.addClass("single-line");
}
addColor(color, disp);
disp.html(s.join(" "));
var sort = $("<span>").addClass("sort-key")
.html(str);
return $("<div>").append(disp.get(0)).append(sort.get(0)).html();
}
var makeStatement = function(str) {
if (_.isArray(str)) {
var color = str[1];
str = str[0];
var disp = $("<span>").html(str);
addColor(color, disp);
return $("<div>").append(disp.get(0)).html();
} else {
return str;
}
}
var makeSoln = function(str) {
if (typeof(str) === "string") {
return str;
} else {
return str[0];
}
}
</script>
<style type="text/css">
.sortable > ul > li {
height: 50px;
width: auto;
max-width: 105px;
padding: 0 10px;
font-size: 11pt;
display: table-cell;
vertical-align: middle;
line-height: 24px;
}
.single-line {
line-height: 50px;
}
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<var id="SORTER">createSorter()</var>
</div>
<div class="problem">
<p>Write the conditional statement in "if-then" form.</p>
<p><var>capitalize(STATEMENT)</var></p>
</div>
<div class="question">
<ul id="sortable">
<li data-each="shuffle(SOLUTION) as SOL">
<var>makeDisplay(SOL)</var>
</li>
</ul>
<p><var>SORTER.init("sortable")</var></p>
</div>
<div class="solution" data-type="custom">
<div class="instruction">
Drag the phrases left and right so they form the correct "if-then" sentence
</div>
<div class="guess">SORTER.getContent()</div>
<div class="validator-function">
return guess.join(" ") === _.map(SOLUTION, makeSoln).join(" ");
</div>
<div class="show-guess">
SORTER.setContent(guess);
</div>
</div>
<div class="problems">
<div id="adjective">
<div class="vars">
<var id="QUESTIONS">
<!-- noun, adjective, conclusion, adjective-noun or noun-adjective-->
[["balloons", "old", "don't float", true],
["trees", "green", "are not dead", true],
["boys", "young", "can't drive", true],
["hot dogs", "green", "are unhealthy", true],
["batteries", "old", "don't work", true],
["cars", "new", "smell nice", true],
["books", "missing pages", "are unhelpful", false],
["polygons", "square", "are rectangles", false],
["angles", "vertical", "share a vertex", false],
["angles", "adjacent", "share a ray", false],
["angles", "adjacent", "share no interior points", false],
["rectangles", "square", "are rhombi", false],
["rectangles", "rhombi", "are square", false]]
</var>
<var id="NOUN,ADJECTIVE,CONCLUSION,ADJ_NOUN">randFromArray(QUESTIONS)</var>
<var id="SOLUTION">["If", [NOUN, 1], ["are "+ADJECTIVE, 1], "then", ["they", 2], [CONCLUSION, 2]]</var>
<var id="STATEMENT_LIST">
ADJ_NOUN ? [[capitalize(ADJECTIVE), 1], " ", [NOUN, 1], " ", [CONCLUSION, 2], "."] :
[[capitalize(NOUN), 1], " which are ", [ADJECTIVE, 1], " ", [CONCLUSION, 2], "."]
</var>
<var id="STATEMENT">_.map(STATEMENT_LIST, makeStatement).join("")</var>
</div>
<div class="hints">
<p>In an "if-then" sentence there is a given part, and a conclusion part. The sentence goes "If <span class="hint_blue"><strong>given part</strong></span>, then <span class="hint_green"><strong>conclusion part</strong></span>."</p>
<p>The conclusion is always true when the given is true, but not necessarily the other way around.</p>
<p>The given part stands by itself. Sometimes it describes an object, and sometimes it is an object itself.</p>
<div>
<p>In this sentence, the given part is "<span class="hint_blue"><var>ADJ_NOUN ? ADJECTIVE+" "+NOUN : NOUN+" which are "+ADJECTIVE</var></span>", which describes what kind of <var>NOUN</var> we are dealing with.</p>
<div class="graphie">
$(".set-blue").addClass("hint_blue");
</div>
</div>
<p>The conclusion part is something that depends on the given part, and is always true when the given part is true.</p>
<div>
<p>In this sentence, the conclusion part is "<span class="hint_green"><var>CONCLUSION</var></span>", which says that <var>NOUN</var> <var>CONCLUSION</var> when the given part is true.</p>
<div class="graphie">
$(".set-green").addClass("hint_green");
</div>
</div>
<div>
<p>To find the answer, we combine the given and conclusion part, to find "<var>_.map(SOLUTION, makeStatement).join(" ")</var>".</p>
<div class="graphie">
$(".set-blue").addClass("hint_blue");
$(".set-green").addClass("hint_green");
</div>
</div>
</div>
</div>
<div id="category">
<div class="vars">
<var id="QUESTIONS">
<!-- category, noun, singular, plural verb, singular, plural adjective -->
[["animal", "spider", "has", "have", "eight legs", "eight legs"],
["creature", "tiggle", "is", "are", "talking", "talking"],
["creature", "wiggle", "is", "are", "walking", "walking"],
["creature", "wiggle", "is", "are", "a tiggle", "tiggles"],
["creature", "tiggle", "is", "are", "a wiggle", "wiggles"],
["animal", "giraffe", "has", "have", "a long neck", "long necks"],
["animal", "giraffe", "has", "have", "four legs", "four legs"],
["animal", "cat", "has", "have", "four legs", "four legs"],
["animal", "dog", "has", "have", "four legs", "four legs"],
["shape", "isosceles triangle", "has", "have","two equal sides", "two equal sides"],
["shape", "rectangle", "has", "have", "four right angles", "four right angles"],
["figure", "quadrilateral", "has", "have", "four sides", "four sides"]]
</var>
<var id="CATEGORY,TYPE,VERB_S,VERB_P,CONCLUSION_S,CONCLUSION_P">randFromArray(QUESTIONS)</var>
<var id="SOLUTION">["If", [an(CATEGORY), 1], ["is", 1], [an(TYPE), 1], "then", ["it", 2], [VERB_S+" "+CONCLUSION_S, 2]]</var>
<var id="STATEMENT_LIST">[[capitalize(plural(TYPE)), 1], " ", [VERB_P, 2], " ", [CONCLUSION_P, 2], "."]</var>
<var id="STATEMENT">_.map(STATEMENT_LIST, makeStatement).join("")</var>
</div>
<div class="hints">
<p>In an "if-then" sentence there is a given part, and a conclusion part. The sentence goes "If <span class="hint_blue"><strong>given part</strong></span>, then <span class="hint_green"><strong>conclusion part</strong></span>."</p>
<p>The conclusion is always true when the given is true, but not necessarily the other way around.</p>
<p>The given part stands by itself. Sometimes it describes an object, and sometimes it is an object itself.</p>
<div>
<p>In this sentence, the given part is "<span class="hint_blue"><var>TYPE</var></span>", which describes what kind of <var>CATEGORY</var> we are dealing with.</p>
<div class="graphie">
$(".set-blue").addClass("hint_blue");
</div>
</div>
<p>The conclusion part is something that depends on the given part, and is always true when the given part is true.</p>
<div>
<p>In this sentence, the conclusion part is "<span class="hint_green"><var>VERB_P+" "+CONCLUSION_P</var></span>", which says that <var>AMBIGUOUS_PLURAL(TYPE)</var> <var>VERB_P+" "+CONCLUSION_P</var> when the given part is true.</p>
<div class="graphie">
$(".set-green").addClass("hint_green");
</div>
</div>
<div>
<p>To find the answer, we combine the given and conclusion part, to find "<var>_.map(SOLUTION, makeStatement).join(" ")</var>".</p>
<div class="graphie">
$(".set-blue").addClass("hint_blue");
$(".set-green").addClass("hint_green");
</div>
</div>
</div>
</div>
<div id="event">
<div class="vars">
<var id="QUESTIONS">
<!-- event verb, event noun, conclusion verb, conclusion noun -->
[["go to", "a birthday party", "eat", "cake"],
["eat", "a sandwich", "turn into", "superman"],
["turn into", "superman", "eat", "a sandwich"],
["watch", "a movie", "eat", "popcorn"],
["miss", "the bus", "ride with", "my dad"],
["go in", "the rain", "take", "my umbrella"],
["answer", "the phone", "say", "Hello"],
["eat", "ice cream", "get", "sick"],
["get", "sick", "eat", "ice cream"],
["miss", "my alarm", "run", "late"],
["go to", "the track meet", "run", "fast"],
["play", "basketball", "make", "a three point shot"],
["go to", "the Olympics", "win", "a gold medal"],
["go to", "the softball game", "hit", "a home run"],
["finish", "my homework", "play", "on the computer"],
["win", "a gold medal", "go to", "Disneyland"]]
</var>
<var id="EVENT_V,EVENT_N,CONC_V,CONC_N">randFromArray(QUESTIONS)</var>
<var id="SOLUTION">["If", ["I", 1], [EVENT_V, 1], [EVENT_N, 1], "then", ["I", 2], [CONC_V, 2], [CONC_N, 2]]</var>
<var id="STATEMENT_LIST">
randFromArray([
[["I will ", 2], [CONC_V, 2], " ", [CONC_N, 2], " when ", ["I ", 1], [EVENT_V, 1], " ", [EVENT_N, 1], "."],
["When ", ["I ", 1], [EVENT_V, 1], " ", [EVENT_N, 1], [", I will ", 2], [CONC_V, 2], " ", [CONC_N, 2], "."]
])
</var>
<var id="STATEMENT">_.map(STATEMENT_LIST, makeStatement).join("")</var>
</div>
<div class="hints">
<p>In an "if-then" sentence there is a given part, and a conclusion part. The sentence goes "If <span class="hint_blue"><strong>given part</strong></span>, then <span class="hint_green"><strong>conclusion part</strong></span>."</p>
<p>The conclusion is always true when the given is true, but not necessarily the other way around.</p>
<p>The given part stands by itself. Sometimes it describes an object, and sometimes it is an event that might happen.</p>
<div>
<p>In this sentence, the given part is "<span class="hint_blue"><var>EVENT_V+" "+EVENT_N</var></span>", which is an event that might happen.</p>
<div class="graphie">
$(".set-blue").addClass("hint_blue");
</div>
</div>
<p>The conclusion part is something that will happen when the given part happens.</p>
<div>
<p>In this sentence, the conclusion part is "<span class="hint_green"><var>CONC_V+" "+CONC_N</var></span>", which is another event that might happen when I <var>EVENT_V+" "+EVENT_N</var>.</p>
<div class="graphie">
$(".set-green").addClass("hint_green");
</div>
</div>
<div>
<p>To find the answer, we combine the given and conclusion part, to find "<var>_.map(SOLUTION, makeStatement).join(" ")</var>".</p>
<div class="graphie">
$(".set-blue").addClass("hint_blue");
$(".set-green").addClass("hint_green");
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>