diff --git a/content.js b/content.js index c2affcfd629f6f3ef880eec83dd8f41ea90b0b70..1fdbd77f68017760caee33844c53728db1ba7542 100644 --- a/content.js +++ b/content.js @@ -17,15 +17,20 @@ let Content = { "}\n", executeAtStart: true, points: function ($element, config, accessor) { - var p = accessor.testResults(5, function (i, args, res) { + var p = accessor.testResults(4, function (i, args, res) { return args.reduce(function (s, v) { return s + v; }, 0) == parseInt(res) - ? 5 + ? 4 : 0; }); return { points: p }; }, + qlcs: { + requirePoints: 8, + rewardPoints: 2, + request: [{ count: 2 }], + }, maxPoints: 10, title: "Array Sum", description: "Fix a function that calculates array sum.", diff --git a/static/simple-quiz-form.js b/static/simple-quiz-form.js new file mode 100644 index 0000000000000000000000000000000000000000..229d97e931ffb7e551ff7fda299d9ef6c4b6323c --- /dev/null +++ b/static/simple-quiz-form.js @@ -0,0 +1,31 @@ +"use strict"; + +function SimpleQuizForm(points, questions, callback) { + const wrap = document.createElement('div'); + wrap.setAttribute('class', 'qlc-wrap'); + wrap.innerHTML = ` + <p>Study your program above to answer these questions for ${points} more points!</p> + <form> + ${questions.map((qlc, n) => { + const many = qlc.options.filter(o => o.correct).length > 1; + return ` + <div class="qlc"> + <strong>${qlc.question}</strong> + ${qlc.options.map((o, i) => ` + <label> + <input type="${many ? 'checkbox' : 'radio'}" name="qlc${n}" value="${i}"> + ${o.answer} + </label> + `).join('\n')} + </div> + `; + }).join('\n')} + </form> + `; + wrap.querySelectorAll('input').forEach(input => { + input.addEventListener('change', (ev) => { + console.log(ev.target); + }); + }); + return wrap; +} diff --git a/static/webdev-editor.css b/static/webdev-editor.css index de856ce9b93522b8b903b4fe972ae5061a6f7549..320094769fc51459d0f6ab064a487b6a6df8c88f 100644 --- a/static/webdev-editor.css +++ b/static/webdev-editor.css @@ -8,6 +8,19 @@ border: none; border-top: 2px solid grey; } +.acos-webdev-editor .qlcs .qlc { + margin: 1em 0; +} +.acos-webdev-editor .qlcs .qlc label { + display: block; + margin: 2px 0; + border: 1px solid lightgrey; + border-radius: 4px; + cursor: pointer; +} +.acos-webdev-editor .qlcs .qlc label:hover { + background-color: gainsboro; +} body.execute { background-color: gainsboro; @@ -79,3 +92,4 @@ body.execute .tone-keyboard button.last-played { border-left-width: 10px; border-top-width: 3px; } + diff --git a/static/webdev-editor.js b/static/webdev-editor.js index b37064591924ef16329d22cb37309939ae43f5b2..b31fbefcd14a20e3bd885923e1edd3b64ba148c1 100644 --- a/static/webdev-editor.js +++ b/static/webdev-editor.js @@ -83,8 +83,12 @@ ACOSWebdev.prototype.extendProtocolFeedback = function (feedback) { }; ACOSWebdev.prototype.postUpdate = function (points, maxPoints) { - var qlcs = qlcjs.generate(this.editor.getValue(), [{ count: 3 }]); - console.log(qlcs); + if (this.config.qlcs) { //&& points >= (this.config.qlcs.requirePoints || 0)) { + this.$element.find('.exercise .qlcs').append(SimpleQuizForm( + this.config.qlcs.rewardPoints, + qlcjs.generate(this.editor.getValue(), this.config.qlcs.request) + )); + } }; ACOSWebdev.prototype.esc = function (str) { diff --git a/templates/body.html b/templates/body.html index e9b08352910d368cd440ed83d86e6e48b89ea327..5ff3fba8f7dec9675fdbe5df1c0d416c64bf6740 100644 --- a/templates/body.html +++ b/templates/body.html @@ -1,2 +1,3 @@ <div class="editor"></div> <div class="output"></div> +<div class="qlcs"></div> diff --git a/templates/head.html b/templates/head.html index 144e5dce23ca78e3726ff7cb33e733da198bc2c1..23ae53d9c375fcba27db9d00171719c4fbcfeabb 100644 --- a/templates/head.html +++ b/templates/head.html @@ -1,4 +1,5 @@ <link href="/static/webdev-editor/webdev-editor.css" rel="stylesheet"> <script src="/static/webdev-editor/ace-builds-1.4.8/ace.js" type="text/javascript" charset="utf-8"></script> <script src="/static/webdev-editor/qlcjs.min.js" type="text/javascript"></script> +<script src="/static/webdev-editor/simple-quiz-form.js" type="text/javascript"></script> <script src="/static/webdev-editor/webdev-editor.js" type="text/javascript"></script>