A functioning and properly rendered quizly component.

Author: ram8647

package.json

@@ -5,6 +5,7 @@
     "main": "dist/runestone.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
+        "check-env": "node -e 'console.log(process.env)' | grep npm",
         "build": "webpack --env.MODE=development",
         "watch": "webpack --env.MODE=development --watch",
         "start": "webpack-dev-server --env.MODE=development --open",

runestone/quizly/README.txt

@@ -0,0 +1,90 @@
+README.txt
+
+The quizly directive, in this first pass looks like this:
+-----------------------------------------------
+
+.. quizly::
+   :quizname: unique-quiz-name from quizzes.js
+
+The quizly component uses and requires the following resources:
+----------------------------------------------
+
+runestone/quizly/quizly.py   -- creates QuizlyNode from directive
+runestone/quizly/__init__.py -- imports the quizly code
+runestone/quizly/toctree.rst
+
+runestone/quizly/js   -- javascript resources
+  -- all_appinv.js    -- compressed files
+  -- all_blockly.js
+  -- all_quizly.js
+  -- blockly.html     -- blockly iframe
+  -- index.html       -- quizly UI and iframe container
+  -- main.css         -- gcb style defs
+  -- media            -- image and icon files
+  -- quizly.js        -- renders quizly exercise and handles interface with runestone 
+  -- quizme-helper.js -- main quizly code
+  -- quizzes.js       -- quizly quiz collection in JSON format
+
+runestone/quizly/test -- some test code
+  -- _sources         -- test files
+     -- Quizly
+        -- TestQuizly.rst  -- contains 1 MC and 2 different quizly exercises
+        -- toctree.rst
+  -- conf.py          -- sphinx config file for runestone
+  -- pavement.py      -- needed for runestone build
+
+The files that need to be coded by the developer
+-----------------------------------------------
+
+./runestone/quizly/quizly.py 
+----------------------------
+Th script that runs during runestone build. Runestone build parses the
+source document and translates the directive and its options into a QuizlyNode.
+
+ - Copies resource files from quizly/js to the project/_static folder, from where
+   they are copied to build/quizly/_static during build, where they are used by
+   the _sources web pages.
+
+ - QuizlyNode -- defines the node. The  only option needed for this is the quizname, 
+   which is parsed from the directive. 
+
+ - visit_quizly_mode(self, node) -- appends the quizly template, instantiated, to the
+   body of the html document that will represent the quizly exercise
+
+ - Quizly(RunestoneDirective) -- its run() method instantiates and returns QuizlyNode,
+   probably called by runestone build.
+
+./runestone/quizly/__init__.py -- called by runestone build, imports quizly.py  
+------------------------------
+
+./runestone/quizly/js/quizly.js 
+-------------------------------
+
+This script runs when the html page containing the quizly iframe is loaded. It contains
+methods to render the quizly component and to handle the interface with runestone.  
+
+This script will be invoked automatically when the page is loaded, provided a quizly entry
+is made in the module.exports list in webpack.config.js.
+
+    "./runestone/quizly/js/quizly.js",
+
+quizly.js contains the following methods and functions:
+
+ -- class Quizly extends RunestoneBase -- constructs a Quizly object that holds the
+    data from the exercise.  Calls renderQuiz() method.
+
+    -- getIFrame() -- extracts the iframe from the fully instantiated html code produced
+       by quizly.py and contained in QuizlyNode.
+
+    -- renderQuizly() -- renders the quizly iframe inside a container <div>.
+
+    -- submitQuizly() -- the method invoked from the callback function when the user
+       clicks "Check Me" button in the quizly exercise.
+
+$(document).bind( ,,, function() {}) -- function that sets up the callback function
+    and binds it to the html document.
+
+setupCallback(quizly)  -- defines the callback function that is invoked when the "Check Me"
+    button is clicked.  It calls quizly.submitQuizly(result), where result is the
+    quizly-graded response to the user's attempt.
+

runestone/quizly/js/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <!-- NOTE:  Don't change this Title -->
   <title>Quizme App Inventor</title>
- <link type="text/css" rel="stylesheet" href="../../css/main.css">
+ <link type="text/css" rel="stylesheet" href="../../_static/quizly/main.css">
   <style>
     body {
       background-color: white;
@@ -40,16 +40,6 @@
   </style>
 
 <script>
- // Event listener and handler for quiz result
- window.addEventListener('message', handleMessage, false);
-
- function handleMessage(event) {  
-//     if (event.origin != "http://localhost:85") { return; }  
-     console.log("handleMessage result: " + event.data)
-     this.window.quizly_result = event.data;
-     console.log("handleMessage window result: " + this.window.quizly_result);
- }
-
 // Based on: https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
 // The variable doc is set based on where the dialogoverlay, which varies if index.html is embedded.
 function JavaScriptAlert(){
@@ -101,19 +91,15 @@
 */
 function checkAnswer() {
   console.log("checkAnswer -- RAM");
+  console.log("window.parent.component_factory = " + JSON.stringify(window.parent.component_factory));
+
   document.getElementById('show_javascript').disabled = true;
   var result = Blockly.Quizme.evaluateUserAnswer();
   var quizName = Blockly.Quizme.quizName
-  window.postMessage("Result=" + result, 'http://localhost:85');
-
-//  window.parent.quizlies['quizname']=quizName;
-//  var thisQuiz = window.parent.quizlies[quizName];
-//  thisQuiz.result = result[0];
-//  thisQuiz.workspace = result[1];
-  
+  var q_result = {"quizname": quizName, "result": result[0], "xml": result[1]}; 
 
-  // Comment this out if there is separate GCB button for submitting the result.
-//  window.parent.checkAnswer();  // This parent script is in modules/quizly/quizly.py
+  // Post the result to runestone
+  window.parent.component_factory.quizly(q_result);
 }
 
 function giveHint() {
@@ -160,7 +146,7 @@ <h1 hidden="true" id="heading">Quizly: Live Coding Exercises for App Inventor</h
           <button class="gcb-button gcb-button-primary" id="hint_button" onclick="giveHint()">Hint</button>
           </td>
           <td>
-          <button class="gcb-button gcb-button-primary" id="gcb_check_answer" onclick="checkAnswer()">Check Answer</button>
+            <button class="gcb-button gcb-button-primary" id="gcb_check_answer" onclick="checkAnswer()">Check Me</button>
           </td>
           <td>
           <button class="gcb-button gcb-button-primary" id="show_javascript" onclick="showJavascript()" style="visibility:hidden" disabled>Show Javascript</button>