RSE 0001

Status

• Proposal: approved, implemented
• Prototype demonstrating activecode is here

Summary

Create a standard set of HTML tags and attributes that can be expanded into runestone widgets using a Javscript library.

Justification

Although the restructuredText directives have made it possible to write a great many books, they do restrict you to writing in one particular format. Lately some people have worked harder than they should have to to hack around that restriction in order to publish course materials outside of Sphinx/RestructuredText that still make use of the Runestone widgets. I am proposing to create a standardized set of HTML tags and attributes that can be converted into the Runestone widgets by Javascript when the page is loaded. This will make it possible to include Runestone Widgets directly into HTML pages using regular HTML editors, Wiki's and other publishing systems like restructuredText that can define their own user friendly macros that expand into the HTML tags.

This is also nice step in the direction of web components wherein we could define our own custom runestone tags.

Details

activecode

<textarea data-component="activecode" id="example1" data-lang="python">
def main()
    print("hello world")
    
main()
</textarea>

The body of the textarea tag contains code to be loaded into the editor initially. The following attributes are options and control what pieces and parts of the component will be visible.

• data-component attribute identifies this as an activecode component
• class The usual CSS class options
• id must be unique in the document
• data-lang for activecode can be python javascript or html
• data-autorun run this activecode as soon as the page is loaded
• data-hidecode make the editor hidden initially
• data-include list of ids of other activecodes. The code form each will be prepended to the code to run
• data-timelimit either False to turn off runtime limit checking or an integer representing the number of milliseconds until timeout.
• data-coach add a button to display code coach information
• data-codelens add a button "Run this in Codelens"

To be HTML5 compliant we prefix all of the custom attributes with data- that seems ugly, but it seems sillier to knowingly generate HTML that will not validate.

animation

assessment

There are two variations on multiple choice questions mchoicemf and mchoicema

<ul data-component="multiplechoice">
The Question can go right here.
<li data-component="answer" id="123" data-correct>Answer one</li>
<li data-component="feedback" for="123">feedback for one</li>

<li data-component="answer" id="456" data-correct>Answer Two</li>
<li data-component="feedback" for="456">feedback for Two</li>
</ul>

fillintheblank

<p data-component="fillintheblank" >This is the text of the question <span answer="regex" width=int></span>more text and <span data-answer="regex" width=int></span> and maybe more</p>

blockly

codelens

<pre data-lang="python" data-component="codelens" id="example1">
def main()
    print("hello world")

main()
</pre>

datafile

<pre data-lang="python" data-component="datafile" id="example1" data-edit="true">
def main()
    print("hello world")

main()
</pre>

disqus

livecode

<pre data-lang="cpp" data-component="livecode" id="example1">

#include <stdio.h>
int main() {
    printf("hello world\n");
}

</pre>

meta

parsons

<pre  data-component="parsons" id="example1">
def main()
---
    print("hello world")
---
main()
</pre>

poll

<ul data-component="poll">
    <li> choice one </li>
    <li> choice two </li>
    <li> choice N </li>
</ul>

reveal

<div data-component="reveal" id="example1" data-modal>
any html inside the div will be hidden until the button is clicked
</div>

tabbedStuff

    <div data-component="tabbedStuff" id="myid">
    <div data-component="tab"></div>
    <div data-component="tab"></div>
    <div data-component="tab"></div>
    </div>

video

<video controls preload="none" poster="_static/thumb.png">
    <source src="http://x.y.z/runestone.mov" type="video/mp4"></source>
    <source src="http://x.y.z/runestone.webm" type="video/webm"></source>
    No supported video types
</video>