Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
361 lines (308 sloc) 17.4 KB
<!DOCTYPE html>
<html data-require="math math-format graphie word-problems">
<head>
<title>Probability space</title>
<script data-main="../local-only/main.js" src="../local-only/require.js"></script>
<style>
/* Classes and IDs are prefixed with "e-" to avoid conflicts with global CSS. */
.e-dice {
background: #d9d9d9;
float: left;
height: 54px;
margin: 0 1px 1px 0;
position: relative;
width: 54px;
}
.e-dice:hover {
background: #def0fa;
}
.e-dice.e-selected {
background: #a9d4eb;
}
.e-die {
background: #333;
border: 1px solid #4d4d4d;
border-radius: 3px;
height: 18px;
position: absolute;
top: 17px;
width: 18px;
}
.e-die.e-black {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAAASCAMAAACJkMtOAAAALVBMVEXMzMxAQEDm5uZzc3OZmZmmpqbZ2dny8vJmZmaAgIBZWVmzs7NNTU3///8zMzMyuWEDAAAA4ElEQVR42s2V4Q6DMAiEdWpbaG/v/7iLTkYrI4saF+9PDX71WiDYPf+oO5gl3ka4eAynLVNkNz3CMK9DeJBrFoDcRjIwWmZ9E1pmlN0FQJwfIoDimCUAaO8lEcvMa1JGI4axZrIt/jDj+tRszFhuvxh0QKjTWOqaTIhk0kjfGYqYWoY+Rehp/cxAfWWWBXC0l7EHUrOCpYSOjjA2sRea2Qa5Oo0B73pOXoOINNciKf6OBsnjCmdpEE/a1ipI5FTrW2murZmth0Z8xjfTUaTSUXR+XFlxMv3GBwfxTX4x1+gFaUFk+Pqj+fIAAAAASUVORK5CYII=');
left: 6px;
}
.e-six-by-four .e-black {
left: 4px;
}
.e-die.e-white {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAAASCAMAAACJkMtOAAAALVBMVEXy8vJmZmZNTU2/v7+ZmZmMjIxZWVlAQEDMzMyzs7PZ2dmAgIDm5uYzMzP///+mxCSnAAAA4UlEQVR42s2V4Q6DIAyEdSrQwu39H3dhsyvYNcs0Lt4fTP3woG3qcP+jrmCWeBvh4jGctkyR3XQLU12ncCPXLAC5j2Rgtsz6JvTMLLsLgFgfIoDimCUA6O8lEcvUNSmjEcNYM9kWv5hxe2o2Ziy3H+s6AqFNY2lrsiCSSSN9Zihi6Rl6F2Gg9TMTDY1ZFsDRDsYcSMwKniV0tIexiT3RzDbI2WkMeNVzsQ3SS3MtkuL/0CB5XuEsDeJJ21oFiRxqfSvNtTWz9dCIz/hmOopUOoqOjysrTqbfeOcgvsgv5hw9AGlBZPiJk4LrAAAAAElFTkSuQmCC');
border-color: #888;
left: 28px;
}
.e-six-by-four .e-die.e-white {
background-color: transparent;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAUCAMAAABF9cjdAAAArlBMVEWIiIiIiIiIiIiIiIiFhYWIiIiBgYGAgICDg4OIiIiIiIiIiIiIiIgAAADc3NyMjIzGxsazs7Nzc3O1tbXBwcHU1NTn5+fw8PCAgIBZWVm/v79AQEBmZmbe3t5NTU3p6emenp68vLzh4eHExMTy8vLm5ubs7Oz29vbQ0NDS0tLj4+P6+vqZmZnx8fGPj4/Ly8va2trMzMz4+PjZ2dl/f3+Xl5empqYzMzOIiIj///+cFc8QAAAADnRSTlNwoFAws2Db7seAIBBAAIeueasAAAG4SURBVHjardJZb5tAFIZhstmOcZvaTVo2k43NMATjAYbv//+xDtucSoOcG87deYTmFdIxfqi5W6/vaFvK/wts6rcNbUs5BW7rC+pbtS7lFFifgPNarQs5BR4byGkep30Zp8C2+kAoytdqOwJ544rDzxnf+8Ka+x6OYJNT4OY3mC9KvN+MoJyLJ8e1dA9cqxGN7ghdwTA4BXZfFzBLBi5fu0GUMwHYnu4hC7nY6w67kYHBKbD5BFDKAIrpxMjRCGfOmfAD3Z8OkIHeKfBQYwqgfuiJPPB8Z8bDEqFv6S5sT/j7zilgVmcKfFRmZ8oD/xBgxhsRwvZ0Z4wJr1Ru0Gl1ATox5Y2Q4+keuK4tHN3lCAblXWDbvvYelAHk/G23EpWHpRyuO4KGhZhxoCTvA/fvQJZDzee9xNFpvvX5d4zhtJAlA6ZFNJ5Y79mRX3c55PQOuQysijzh/OVPjwXyPD2t5PfSkb08x7jqSYQ4G53eIZcBowYHYj4G+C9wvMmu9PQ5jzmuOtKkyCend8iN7rTygn44T5MU58rsPI6i4/EbR8ajyekdcmPXnqDNud0t5Ya5amdmZS7l/wAsNOvj8l2mDQAAAABJRU5ErkJggg==');
border: none;
height: 20px;
left: 26px;
width: 24px;
}
.e-two { background-position: -18px 0; }
.e-three { background-position: -36px 0; }
.e-four { background-position: -54px 0; }
.e-five { background-position: -72px 0; }
.e-six { background-position: -90px 0; }
.e-six-by-four .e-white.e-two { background-position: -24px 0; }
.e-six-by-four .e-white.e-three { background-position: -48px 0; }
.e-six-by-four .e-white.e-four { background-position: -72px 0; }
#e-dice-container {
margin: 0 auto;
width: 330px;
}
#e-dice-container .e-legend {
font-style: italic;
text-align: right;
}
.e-grid {
overflow: hidden; /* clearfix */
}
.e-grid.e-six-by-four { height: 220px; }
.e-grid.e-six-by-six { height: 330px; }
</style>
</head>
<body>
<div class="exercise">
<div class="vars">
<!-- PRED defined in concrete problem types -->
<var id="GRID_WIDTH">6</var>
<var id="GRID_HEIGHT">randFromArray([4, 6])</var>
<var id="X">randRange(1, GRID_WIDTH)</var>
<var id="Y">randRange(1, GRID_HEIGHT)</var>
<var id="Z">randRange(2, GRID_WIDTH + GRID_HEIGHT)</var>
<var id="MATCHING_PAIRS">(function() {
var pairs = [], i, j;
for (i = 1; i &lt;= GRID_WIDTH; i++) {
for (j = 1; j &lt;= GRID_HEIGHT; j++) {
if (PRED(i, j)) {
pairs.push([i, j]);
}
}
}
return pairs;
})()</var>
<var id="SOLUTION_N">MATCHING_PAIRS.length</var>
<var id="SOLUTION_D">GRID_WIDTH * GRID_HEIGHT</var>
</div>
<div class="question">
<p class="problem">
<span data-if="GRID_HEIGHT === 4">
You are given two dice to roll. One is black with six sides; the other is white with four sides.
</span>
<span data-else="">
You are given two six-sided dice to roll.
</span>
</p>
<p class="question" id="question-statement"></p>
<p class="render-answer-area-here"></p>
<p class="problem">If it helps, you may select the matching outcomes below. Your selections
aren't checked with your answer:</p>
<div class="problem" id="e-dice-container">
<div class="e-legend"><span id="e-selected-count">0</span> of <var>SOLUTION_D</var> selected</div>
<div class="e-grid">
<div class="e-dice"><div class="e-black e-die"></div><div class="e-die e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-two"></div><div class="e-die e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-three"></div><div class="e-die e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-four"></div><div class="e-die e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-five "></div><div class="e-die e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-six"></div><div class="e-die e-white"></div></div>
<div class="e-dice"><div class="e-black e-die"></div><div class="e-die e-two e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-two"></div><div class="e-die e-two e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-three"></div><div class="e-die e-two e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-four"></div><div class="e-die e-two e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-five "></div><div class="e-die e-two e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-six"></div><div class="e-die e-two e-white"></div></div>
<div class="e-dice"><div class="e-black e-die"></div><div class="e-die e-three e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-two"></div><div class="e-die e-three e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-three"></div><div class="e-die e-three e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-four"></div><div class="e-die e-three e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-five "></div><div class="e-die e-three e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-six"></div><div class="e-die e-three e-white"></div></div>
<div class="e-dice"><div class="e-black e-die"></div><div class="e-die e-four e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-two"></div><div class="e-die e-four e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-three"></div><div class="e-die e-four e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-four"></div><div class="e-die e-four e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-five "></div><div class="e-die e-four e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-six"></div><div class="e-die e-four e-white"></div></div>
<div class="e-dice"><div class="e-black e-die"></div><div class="e-die e-five e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-two"></div><div class="e-die e-five e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-three"></div><div class="e-die e-five e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-four"></div><div class="e-die e-five e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-five "></div><div class="e-die e-five e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-six"></div><div class="e-die e-five e-white"></div></div>
<div class="e-dice"><div class="e-black e-die"></div><div class="e-die e-six e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-two"></div><div class="e-die e-six e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-three"></div><div class="e-die e-six e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-four"></div><div class="e-die e-six e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-five "></div><div class="e-die e-six e-white"></div></div>
<div class="e-dice"><div class="e-black e-die e-six"></div><div class="e-die e-six e-white"></div></div>
</div>
</div>
<div class="graphie problem" id="graph">
Khan.scratchpad.disable();
// Set .e-grid size.
$('.e-grid').addClass('e-six-by-' + (GRID_HEIGHT === 6 ? 'six' : 'four'));
// Toggle cell selection on click.
var selected = $('#e-selected-count');
$('.e-dice').on('click', function() {
$(this).toggleClass('e-selected');
selected.text($('.e-selected').length);
});
graph.selectMatching = function(matchingPairs) {
$(".e-dice").removeClass("e-selected");
_.each(matchingPairs, function(match) {
$(".e-dice").eq((match[1] - 1) * 6 + (match[0] - 1)).addClass("e-selected");
});
$("#e-selected-count").text($(".e-selected").length);
};
</div>
</div>
<div class="solution" data-forms="integer, decimal, proper, percent"><var>SOLUTION_N / SOLUTION_D</var></div>
<div class="hints">
<div>
<p data-if="isSingular(SOLUTION_N)">
There is <b>one</b> matching outcome.
</p><p data-else="">
There are
<b><code><var>SOLUTION_N</var></code></b> matching
outcomes.
</p>
<div class="graphie" data-update="graph">
graph.selectMatching(MATCHING_PAIRS);
</div>
</div>
<p>The probability is the number of <b>matching outcomes</b> divided by <b>all possible outcomes</b>.</p>
<p data-if="reduces(SOLUTION_N, SOLUTION_D)">
The probability is <code><var>fraction(SOLUTION_N, SOLUTION_D)</var></code>,
which reduces to <code><var>fractionReduce(SOLUTION_N, SOLUTION_D)</var></code>.
</p>
<p data-else="">
The probability is <code><var>fractionReduce(SOLUTION_N, SOLUTION_D)</var></code>.
</p>
</div>
<div class="problems">
<div id="d1-and-d2-are-x-and-y">
<div class="vars" data-apply="prependVars">
<var id="PRED">function(x, y) {
return (x === X &amp;&amp; y === Y ||
x === Y &amp;&amp; y === X);
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
<span data-if="X !== Y">
<span data-if="X < 5">
For a given roll, what is the probability that the dice display
<code><var>X</var></code> and <code><var>Y</var></code>
in any order?
</span><span data-else>
For a given roll, what is the probability that the dice display
<code><var>X</var></code> and <code><var>Y</var></code>?
</span>
</span><span data-else>
For a given roll, what is the probability that the dice both display
<code><var>X</var></code>?
</span>
</span>
</div>
<div id="d1-is-even-d2-is-x">
<div class="vars" data-apply="prependVars">
<var id="EVEN">rand(2)</var>
<var id="PRED">function(x, y) {
return x % 2 !== EVEN &amp;&amp; y === Y;
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
<span data-if="EVEN">
For a given roll, what is the probability that the black
die displays an even number and the white die displays
<code><var>Y</var></code>?
</span><span data-else>
For a given roll, what is the probability that the black
die displays an odd number and the white die displays
<code><var>Y</var></code>?
</span>
</span>
<div class="hints" data-apply="prependContents">
<p data-if="EVEN">
How many matching outcomes are there with an even number on the black die and
<code><var>Y</var></code> on the white die?
</p><p data-else>
How many matching outcomes are there with an odd number on the black die and
<code><var>Y</var></code> on the white die?
</p>
</div>
</div>
<div id="d1-plus-d2-is-x" data-weight="2">
<div class="vars" data-apply="prependVars">
<var id="PRED">function(x, y) {
return x + y === Z;
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
For a given roll, what is the probability that the values of the dice add to <code><var>Z</var></code>?
</span>
<div class="hints" data-apply="prependContents">
<p>For each value on the black die, is there a value on the white die that adds to <code><var>Z</var></code>?</p>
</div>
</div>
<div id="d1-plus-d2-is-leq-x" data-weight="2">
<div class="vars" data-apply="prependVars">
<var id="PRED">function(x, y) {
return x + y &lt;= Z;
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
For a given roll, what is the probability that the values of the dice add to <code><var>Z</var></code> <em>or less</em>?
</span>
<div class="hints" data-apply="prependContents">
<p>Count all outcomes that are less than or equal to <code><var>Z</var></code>.</p>
</div>
</div>
<div id="d1-same-as-d2">
<div class="vars" data-apply="prependVars">
<var id="PRED">function(x, y) {
return x === y;
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
For a given roll, what is the probability you roll the same number on each die?
</span>
</div>
<div id="d1-is-x-d2-is-y">
<div class="vars" data-apply="prependVars">
<var id="PRED">function(x, y) {
return x === X &amp;&amp; y === Y;
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
For a given roll, what is the probability the black die displays
<code><var>X</var></code> and the white die displays <code><var>Y</var></code>?
</span>
</div>
<div id="d1-or-d2-is-x">
<div class="vars" data-apply="prependVars">
<var id="PRED">function(x, y) {
return x === X || y === X;
}</var>
</div>
<span class="question" id="question-statement" data-apply="append">
For a given roll, what is the probability at least one die displays <code><var>X</var></code>?
</span>
<div class="hints" data-apply="prependContents">
<p data-if="X < 5">Remember that both dice can be <code><var>X</var></code> ("at least one").</p>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.