In [2]:
from IPython.display import HTML
Taking some themes from the following youtube video.
Potential Question: "If taxes are increased, which curve represents the new aggregate demand (AD)?
In [9]:
%%HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 10px;
/*padding-top: 40px;*/
}
</style>
</head>
<body>
<!-- COMMENT: Define the jxgbox - aka, where all the interactive graphing will go. -->
<div style="width: 100%; overflow: hidden;">
<div id='jxgbox1' class='jxgbox' style='width:450px; height:350px; float:left; border: solid #1f628d 2px;'></div>
</div>
<!-- COMMENT: Buttons below are used to add debugging features to an interactive. Conole logging allows you to see
output within a browser's console. Try reading about Chrome's console. -->
<input class="btn" type="button" value="Pass State for Grading" onClick="passState()">
<div id="spaceBelow">State:</div>
<!-- COMMENT: Where our Javascript begins. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.98/jsxgraphcore.js"></script>
<script type='text/javascript'>
bboxlimits = [-1.1, 12, 12, -1.1];
var board = JXG.JSXGraph.initBoard('jxgbox1', {axis:false,
showCopyright: false,
showNavigation: false,
zoom: false,
pan: false,
boundingbox:bboxlimits,
grid: false,
hasMouseUp: true,
});
xaxis = board.create('axis', [[0, 0], [12, 0]], {withLabel: true, name: "Real GDP", label: {offset: [320,-20]}});
yaxis = board.create('axis', [[0, 0], [0, 12]], {withLabel: true, name: "Price Level", label: {offset: [-60,260]}});
//Axes
xaxis.removeAllTicks();
yaxis.removeAllTicks();
var xlabel = board.create('text',[-1,10,"Price<br>Level"],{fixed:true});
var ylabel = board.create('text',[9,-0.5,"Real GDP"],{fixed:true});
//Define Functions
var p1 = board.create('point',[-2.0,-2.0],{withLabel:false});
var p2 = board.create('point',[12.0,12.0],{withLabel:false});
var line1 = board.create('line',[p1,p2],{strokeColor:'blue',strokeWidth:'3',name:'AD',withLabel:false});
var line2 = board.create('line',[[0.0,0.0],[12.0,12.0]],{strokeColor:'gray',strokeWidth:'1',dash:'1',fixed:true});
var f2 = board.create('functiongraph', [function(x){ return Math.abs(10.0/x);},0.01,15], {strokeColor:'black',strokeWidth:'3',name:'SRAS'});
//Standard edX JSinput functions
getInput = function(){
input = state;
console.log(JSON.stringify(input))
return JSON.stringify(input);
}
getState = function(){
//state = {input: JSON.parse(getinput()), y:xfield.position};
statestr = JSON.stringify(state);
// $('#msg').html('getstate ' + statestr);
//IPython Notebook Considerations
document.getElementById('spaceBelow').innerHTML += '<br>'+statestr;
var command = "state = '" + statestr + "'";
console.log(command);
//Kernel
var kernel = IPython.notebook.kernel;
kernel.execute(command);
return statestr
}
setState = function(statestr){
console.log(statestr);
// alert(statestr);
initializeVector(statestr);
$('#msg').html('setstate ' + statestr);
state = JSON.parse(statestr);
console.log(state);
initializeVector(state);
console.debug('State updated successfully from saved.');
}
</script>
</body>
</html>
In [78]:
def overallGrader(e, ans):
return {'ok': True, 'msg': 'Good job!'}
import json
answer = json.loads(state)
if answer['f1'] == 'red' and answer['f2'] == 'DarkGrey':
print {'ok': True, 'msg': 'Good job.'}
else:
print {'ok': False, 'msg': 'Something wrong.'}
In [ ]: