working frontend display for mtf

Author: tnip

build/app.build.js

@@ -55,7 +55,7 @@
                 "SimpleClient",
                 "SimpleFigure",
                 "QServer",
-                "MCQServer"
+                "MCQServer",
                 "MTFServer"
             ]
         }

exampleCourse/questions/fossilFuelsTrueFalse/info.json

@@ -5,7 +5,8 @@
     "type": "MultipleTrueFalse",
     "options": {
       "trueStatements": [
-          "Cheapness is an advantage of fossil fuels relative to renewable energy sources."
+          "Cheapness is an advantage of fossil fuels relative to renewable energy sources.",
+          "Frugalness is an advantage of fossil fuels relative to renewable energy sources for its frugality and whateverness because whatever is whatever."
       ],
       "falseStatements": [
           "This is a false statement"

frontend/require/MTFClient.js

@@ -4,17 +4,35 @@ define(["underscore", "SimpleClient"], function(_, SimpleClient) {
     function MTFClient(options) {
         SimpleClient.SimpleClient.call(this, options);
         this.options.questionTemplate = '<p>' +
-          '<%= params.text %></p>' +
-          '<% for (var i = 0; i < params.answers.length; i++) { %>' +
-            '<div class="radio">' +
-              '<label>' +
-                '<input type="radio" name="selection" value="<%= params.answers[i].key %>" data-checked="submittedAnswer.key" />' +
-                '(<%= params.answers[i].key %>) ' +
-                '<%= params.answers[i].text %>' +
-              '</label>' +
+          '<% for (var i = 0; i < params.statements.length; i++) { %>' +
+            '<div class="trueFalse" style="display:table; width:100%;">' +
+              '<div style="display:table-row; width:100%;">' +
+                '<div style="display:table-cell; width:80%; padding:0.75em; border-bottom:1px solid black">' +
+                  '<%= params.statements[i].statement %>' +
+                '</div>' +
+                '<div style="display:table-cell; text-align:center; width:20%; padding:0.75em;border-bottom:1px solid black; vertical-align:middle;">' +
+                  '<label>' +
+                    '<input type="checkbox" data-checkedoptional="submittedAnswer.<%= params.statements[i].key %>-true" />' +
+                    ' True' +
+                  '</label>' +
+                  '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
+                  '<label>' +
+                    '<input type="checkbox" data-checkedoptional="submittedAnswer.<%= params.statements[i].key %>-false" />' +
+                    ' False' +
+                  '</label>' +
+                '</div>' +
+              '</div>' +
             '</div>' +
           '<% } %>';
-        this.options.answerTemplate = '<p>(<%= trueAnswer.key %>) <%= trueAnswer.text %></p>';
+        this.options.answerTemplate = '<p>atemp</p>';
+
+
+/*
+        this.options.answerTemplate = '<p>Correct answers: <% if (trueAnswer.correctAnswers.length == 0) { %>None.<% } %></p>'
+            + '<% for (var i = 0; i < trueAnswer.correctAnswers.length; i++) { %>'
+            + '<p>(<%= trueAnswer.correctAnswers[i].key %>) <%= trueAnswer.correctAnswers[i].statement %></p>'
+            + '<% } %>';
+            */
     }
     MTFClient.prototype = new SimpleClient.SimpleClient();
 

frontend/require/MTFServer.js

@@ -8,43 +8,48 @@ define(["underscore", "QServer", "PrairieRandom"], function(_, QServer, PrairieR
 
     MTFServer.prototype.getData = function(vid, options) {
         var rand = new PrairieRandom.RandomGenerator(vid);
+
+        // Set some default values first.
+        // Missing values should be caught by the schemas.
         options = _.defaults(options, {
-            text: "Question text not defined.",
-            correctAnswers: ["Correct answers not defined."],
-            incorrectAnswers: ["Incorrect answers not defined."],
-            numberAnswers: 5,
+            trueStatements: [],
+            falseStatements: []
         });
 
-        var numberCorrect = 1;
-        var numberIncorrect = options.numberAnswers - numberCorrect;
-        numberIncorrect = Math.min(numberIncorrect, options.incorrectAnswers.length);
+        var numberTrue = options.trueStatements.length;
+        var numberFalse = options.falseStatements.length;
+
+        // TODO(tnip): This is kinda weird. We should be checking for
+        // definedness on the full set. If empty, throw an error.
+        //
+        // Here, we want a list of all the statements so we can list them all.
+        var allStatements = [];
+        allStatements = allStatements.concat(options.trueStatements);
+        allStatements = allStatements.concat(options.falseStatements);
 
-        var answers = [];
-        answers = answers.concat(rand.randNElem(numberCorrect, options.correctAnswers));
-        answers = answers.concat(rand.randNElem(numberIncorrect, options.incorrectAnswers));
-        var perm = rand.shuffle(answers);
-        answers = _(answers).map(function(value, index) {
-                return {key: String.fromCharCode('a'.charCodeAt() + index), text: value};
+        allStatements = _(allStatements).map(function(value, index) {
+              return {key: 'q' + index.toString(), statement: value};
         });
+
+        console.log(allStatements);
+
         var params = {
-            text: options.text,
-            answers: answers,
-        };
-        var trueIndex = _(perm).indexOf(0);
-        var trueAnswer = {
-            key: answers[trueIndex].key,
-            text: answers[trueIndex].text,
+            statements: allStatements
         };
+
         var questionData = {
             params: params,
-            trueAnswer: trueAnswer,
+            trueAnswer: {}
         };
+
         return questionData;
     }
 
+    /*
     MTFServer.prototype.transformTrueAnswer = function(vid, params, trueAns) {
         return {key: trueAns.key};
     }
+    */
 
     return MTFServer;
 });