From 784769349fe871dde797fa521f86f63e3141700b Mon Sep 17 00:00:00 2001
From: Teemu Lehtinen <teemu.t.lehtinen@aalto.fi>
Date: Wed, 23 Feb 2022 16:43:19 +0200
Subject: [PATCH] Add initial quiz form

---
 content.js                 |  9 +++++++--
 static/simple-quiz-form.js | 31 +++++++++++++++++++++++++++++++
 static/webdev-editor.css   | 14 ++++++++++++++
 static/webdev-editor.js    |  8 ++++++--
 templates/body.html        |  1 +
 templates/head.html        |  1 +
 6 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 static/simple-quiz-form.js

diff --git a/content.js b/content.js
index c2affcf..1fdbd77 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 0000000..229d97e
--- /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 de856ce..3200947 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 b370645..b31fbef 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 e9b0835..5ff3fba 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 144e5dc..23ae53d 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>
-- 
GitLab