Merge branch 'master' into accessibility_fixes

Author: ascholerChemeketa

.gitattributes

@@ -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 --mode=development",
         "buildj": "webpack --mode=development --profile --json > stats.json",
         "watch": "webpack --mode=development --watch",
@@ -37,6 +38,7 @@
         "jexcel": "^3.9.1",
         "jquery-ui": "1.10.4",
         "sql.js": "1.5.0",
-        "vega-embed": "3.14.0"
+        "vega-embed": "3.14.0",
+        "wavedrom": "^2.0.0"
     }
-}
+}

package-lock.json

@@ -7,6 +7,8 @@
 from .animation import Animation
 from .mchoice import MChoice, QuestionNumber
 from .blockly import Blockly
+from .quizly import Quizly
+from .khanex import Khanex
 from .codelens import Codelens
 from .clickableArea import ClickableArea
 from .datafile import DataFile
@@ -51,11 +53,7 @@ def runestone_static_dirs():
     module_static_css.append(os.path.join(basedir, "webgldemo", "css"))
     module_static_css.append(os.path.join(basedir, "matrixeq", "css"))
     module_static_css.append(os.path.join(basedir, "lp", "css"))
-    return (
-        module_static_js
-        + module_static_css
-        + CodeChat.CodeToRest.html_static_path()
-    )
+    return module_static_js + module_static_css + CodeChat.CodeToRest.html_static_path()
 
 
 # runestone_extensions()
@@ -76,6 +74,7 @@ def runestone_extensions():
     modules.insert(0, modules.pop(modules.index("runestone.common")))
     return modules
 
+
 # setup_js_defer(app, pagename, templatexname, context, doctree)
 # -----------------------
 # Used to inspect js right before it is rendered to page so that
@@ -85,16 +84,20 @@ def js_defer(script_files):
         for js in sorted(script_files):
             if app.config.html_defer_js:
                 # Files added from Runestone should already have defer set - so just add it to sphinx based ones
-                to_defer = ["_static/jquery.js", "_static/underscore.js","_static/doctools.js"]
+                to_defer = [
+                    "_static/jquery.js",
+                    "_static/underscore.js",
+                    "_static/doctools.js",
+                ]
                 if isinstance(js, JavaScript) and js in to_defer:
                     js.attributes["defer"] = ""
             else:
-                #config flag not set, prevent all deferrals
+                # config flag not set, prevent all deferrals
                 if isinstance(js, JavaScript):
                     js.attributes.pop("defer", None)
-        return ''
+        return ""
 
-    context['js_defer'] = js_defer
+    context["js_defer"] = js_defer
 
 
 # setup(app)
@@ -108,7 +111,13 @@ def setup(app):
     we wanted to do for all projects.
     """
     # Include JS and CSS produced by webpack. See `webpack static imports <webpack_static_imports>`_.
-    with open(pkg_resources.resource_filename("runestone", "dist/webpack_static_imports.json"), "r", encoding="utf-8") as f:
+    with open(
+        pkg_resources.resource_filename(
+            "runestone", "dist/webpack_static_imports.json"
+        ),
+        "r",
+        encoding="utf-8",
+    ) as f:
         wb_imports = json.load(f)
         script_files = wb_imports["js"]
         _css_files = css_files + wb_imports["css"]
@@ -124,9 +133,26 @@ def setup(app):
         except ExtensionError:
             app.add_css_file(cssfile)
 
+    # projects can define their own custom css or js files to include
+    # But since this is imported into their conf.py authors must
+    # define them as attributes of the setup function
+    # ``setup.custom_xxx_files``
+    try:
+        for c in setup.custom_css_files:
+            app.add_css_file(c)
+        print("Adding custom CSS files")
+    except AttributeError:
+        print("No custom CSS files")
+    try:
+        for c in setup.custom_js_files:
+            app.add_js_file(c)
+        print("Adding custom Javascript")
+    except AttributeError:
+        print("No custom js files")
+
     app.config.html_static_path.append("dist/")
-    app.add_config_value("html_defer_js", False, 'env')
-    app.connect('html-page-context', setup_js_defer)
+    app.add_config_value("html_defer_js", False, "env")
+    app.connect("html-page-context", setup_js_defer)
 
 
 def get_master_url():
@@ -217,6 +243,7 @@ def build(options):
     "dragndrop": DragNDrop,
     "parsonsprob": ParsonsProblem,
     "poll": Poll,
+    "quizly": Quizly,
     "reveal": RevealDirective,
     "selectquestion": SelectQuestion,
     "shortanswer": JournalDirective,

package.json

@@ -6,6 +6,10 @@ export async function renderRunestoneComponent(componentSrc, whereDiv, moreOpts)
      *  The tedious part is calling the right functions to turn the
      *  source into the actual component.
      */
+    if (!componentSrc) {
+        jQuery(`#${whereDiv}`).html(`<p>Sorry, no source is available for preview.</p>`);
+        return;
+    }
     let patt = /..\/_images/g;
     componentSrc = componentSrc.replace(
         patt,
@@ -38,7 +42,7 @@ export async function renderRunestoneComponent(componentSrc, whereDiv, moreOpts)
 
     if (typeof component_factory === "undefined") {
         alert(
-            "Error:  Missing the component factory!  Clear you browser cache."
+            "Error:  Missing the component factory!"
         );
     } else {
         if (

runestone/__init__.py

@@ -33,7 +33,7 @@
     <div class="navbar-header">
       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
       <button type='button' class='navbar-toggle' data-toggle="collapse" data-target=".navbar-ex1-collapse">
-        <span class="icon-bar visuallyhidden" aria-label="navbar toggle">toggle navbar</span>
+        <span class="icon-bar" aria-label="navbar toggle">toggle navbar</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
@@ -68,7 +68,7 @@
         {% if minimal_outside_links != 'True' %}
         <li class="dropdown">
           <a class="dropdown-toggle" href="#" data-toggle="dropdown">
-            <i class="glyphicon glyphicon-globe visuallyhidden" style="opacity: 0.9"><span aria-label="Social">Social</span></i>
+            <i class="glyphicon glyphicon-globe" style="opacity: 0.9"><span class="visuallyhidden" aria-label="Social">Social</span></i>
           </a>
           <ul class="dropdown-menu social-menu">
               <li>
@@ -105,7 +105,7 @@
         <!-- search dropdown -->
         <li class="dropdown">
           <a class="dropdown-toggle" href="#" data-toggle="dropdown">
-            <i class="glyphicon glyphicon-search visuallyhidden" style='opacity:0.9;'><span aria-label="Search">Search</span></i>
+            <i class="glyphicon glyphicon-search" style='opacity:0.9;'><span class="visuallyhidden" aria-label="Search">Search</span></i>
           </a>
           <ul class='dropdown-menu'>
             {% if 'overview' in course_id %}
@@ -139,7 +139,7 @@
         <!-- user account dropdown -->
         <li class="dropdown">
           <a class="dropdown-toggle" href="#" data-toggle="dropdown">
-            <i class="glyphicon glyphicon-user visuallyhidden" style="opacity:0.9;"><span aria-label="User">User</span></i>
+            <i class="glyphicon glyphicon-user" style="opacity:0.9;"><span class="visuallyhidden" aria-label="User">User</span></i>
           </a>
           <ul class="dropdown-menu user-menu">
             <li><span class='loggedinuser'></span></li>
@@ -173,8 +173,8 @@
         <!-- <li id="scratch_ac_link"><a href="javascript:ACFactory.toggleScratchActivecode()">Scratch ActiveCode</a></li> -->
 
         <!-- <li class="dropdown">             -->
-          <li id="scratch_ac_link" class="dropdown"><a href="javascript:ACFactory.toggleScratchActivecode()">
-              <i class="glyphicon glyphicon-pencil visuallyhidden" style="opacity:0.9;"><span aria-label="Scratch Activecode">Scratch Activecode</span></i></a></li>
+          <li id="scratch_ac_link" class="dropdown"><a href="javascript:runestoneComponents.popupScratchAC()">
+              <i class="glyphicon glyphicon-pencil" style="opacity:0.9;"><span class="visuallyhidden" aria-label="Scratch Activecode" >Scratch Activecode</span></i></a></li>
         <!-- </li> -->
 
         <li class="divider-vertical"></li>
@@ -183,7 +183,7 @@
         <!-- help menu dropdown -->
         <li class="dropdown">
           <a class="dropdown-toggle" href="#" data-toggle="dropdown">
-            <i class="glyphicon glyphicon-question-sign visuallyhidden" style="opacity:0.9;"><span aria-label="Help">Help</span></i>
+            <i class="glyphicon glyphicon-question-sign" style="opacity:0.9;"><span class="visuallyhidden" aria-label="Help">Help</span></i>
           </a>
           <ul class="dropdown-menu user-menu">
             <li><a href='http://runestoneinteractive.org/pages/faq.html'>FAQ</a></li>
@@ -262,7 +262,6 @@
   eBookConfig.proxyuri_files = '{{proxy_uri_files}}';
   eBookConfig.enable_chatcodes = {{enable_chatcodes}} ? {{ enable_chatcodes }} : false;
 
-
 </script>
 
 <!-- Ad Serving Headers Only serve ads to Anonymous Users -->

runestone/common/js/renderComponent.js

@@ -0,0 +1,77 @@
+README.txt
+
+The content files for the khanex component must be stored in the 
+ course's _static folder. Download the following file and unzip it in _static:
+ https://github.com/ram8647/khanex/blob/16398fd496fad5b93fdf4d72c274064db8d1d1ac/khanex-runestone.zip
+
+The khanex directive, in this first pass looks like this:
+-----------------------------------------------
+
+.. khanex::
+   :exercise: unique-exercise-name /qs folder
+
+The quizly component uses and requires the following resources:
+----------------------------------------------
+
+runestone/khanex/khanex.py   -- creates KhanexNode from directive
+runestone/khanex/__init__.py -- imports the khanex code
+
+runestone/khanex/js   -- javascript resources
+
+
+runestone/khanex/test -- some test code
+  -- _sources         -- test files
+  -- conf.py          -- sphinx config file for runestone
+  -- pavement.py      -- needed for runestone build
+
+The files that need to be coded by the developer
+-----------------------------------------------
+
+./runestone/khanex/khanex.py 
+----------------------------
+Th script that runs during runestone build. Runestone build parses the
+source document and translates the directive and its options into a QuizlyNode.
+
+ - 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/khanex/__init__.py -- called by runestone build, imports khanex.py  
+------------------------------
+
+./runestone/khanex/js/khanex.js 
+-------------------------------
+
+This script runs when the html page containing the khanex iframe is loaded. It contains
+methods to render the khanex component and to handle the interface with runestone.  
+
+This script will be invoked automatically when the page is loaded, provided a khanex entry
+is made in the module.exports list in webpack.config.js.
+
+    "./runestone/khanex/js/khanex.js",
+
+khanex.js contains the following methods and functions:
+
+ -- class Khanex extends RunestoneBase -- constructs a Khanex object that holds the
+    data from the exercise.  Calls renderQuiz() method.
+
+    -- getIFrame() -- extracts the iframe from the fully instantiated html code produced
+       by khanex.py and contained in KhanexNode.
+
+    -- renderKhanex() -- renders the khanex iframe inside a container <div>.
+
+    -- submitKhanex() -- the method invoked from the callback function when the user
+       clicks "Check Me" button in the khanex exercise.
+
+$(document).bind( ,,, function() {}) -- function that sets up the callback function
+    and binds it to the html document.
+
+setupCallback(khanex)  -- defines the callback function that is invoked when the "Check Me"
+    button is clicked.  It calls khanex.submitKhanex(result), where result is the
+    khanex-graded response to the user's attempt.
+

runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/layout.html

@@ -0,0 +1 @@
+from .khanex import *

runestone/khanex/README.txt

@@ -0,0 +1 @@
+Header set Access-Control-Allow-Origin "*"