How to use runestone - 10 common examples

rb.logBookEvent({'event':'video','act':'play','div_id': '%(divid)s'});
         // Log the run event
      });
      $('#%(divid)s video').one("click", function(){
        this.play();
      });
      $('#%(divid)s video').one("play", function(){
        rb.logBookEvent({'event':'video','act':'play','div_id': '%(divid)s'});
      });
   });

"""
SOURCE = """<source type="video/%s" src="%s">"""


class Video(RunestoneIdDirective):
    """
.. video:: id
   :controls:  Show the controls or not
   :loop: loop the video
   :thumb: url to thumbnail image
   :preload: set the video to preload in the bg

   url to video format 1
   url to video format 2
   ...
    """

    required_arguments = 1
    optional_arguments = 1
    final_argument_whitespace = True
    has_content = True

if "foregroundcolor" in self.options:
            color_scheme += " color:" + self.options["foregroundcolor"].strip() + ";"

        self.options["colorscheme"] = color_scheme + '"'

        if "highlightcolor" in self.options:
            self.options["highlightcolor"] = self.options["highlightcolor"].strip()
        else:
            self.options["highlightcolor"] = "red"  # default highlight color

        return [MatrixEqNode(self.options)]


# ==========================================================================
class MatrixEqNode(nodes.General, nodes.Element, RunestoneNode):
    def __init__(self, content, **kwargs):
        """

        Arguments:
        - `self`:
        - `content`:
        """
        super(MatrixEqNode, self).__init__(name=content["name"], **kwargs)
        self.components = content


def matrixToHTML(text, nodeID, node):
    # Divide the text into a "header" and the matrix values
    parts = text.split(":")
    if len(parts) == 1:
        header = nodeID  # The generated ID from the calling function

split_docname = self.srcpath.split("/")
        if len(split_docname) < 2:
            # TODO: Warn about this? Something like ``self.state.document.settings.env``?
            split_docname.append("")
        self.subchapter = split_docname[-1]
        self.chapter = split_docname[-2]
        self.basecourse = self.state.document.settings.env.config.html_context.get(
            "basecourse", "unknown"
        )
        self.options["basecourse"] = self.basecourse
        self.options["chapter"] = self.chapter
        self.options["subchapter"] = self.subchapter


# This is a base class for all Runestone directives which require a divid as their first parameter.
class RunestoneIdDirective(RunestoneDirective):
    def getNumber(self):
        env = self.state.document.settings.env

        if (
            self.name in UNNUMBERED_DIRECTIVES
            or env.config.generate_component_labels is False
        ):
            return ""

        env.assesscounter += 1

        res = "Q-%d"

        if hasattr(env, "assessprefix"):
            res = env.assessprefix + "%d"

def __init__(self, *args, **kwargs):
        super(RunestoneDirective, self).__init__(*args, **kwargs)
        env = self.state.document.settings.env
        self.srcpath = env.docname
        # Rather tha use ``os.sep`` to split ``self.srcpath``, use ``'/'``, because Sphinx internally stores filesnames using this separator, even on Windows.
        split_docname = self.srcpath.split("/")
        if len(split_docname) < 2:
            # TODO: Warn about this? Something like ``self.state.document.settings.env``?
            split_docname.append("")
        self.subchapter = split_docname[-1]
        self.chapter = split_docname[-2]
        self.basecourse = self.state.document.settings.env.config.html_context.get(
            "basecourse", "unknown"
        )
        self.options["basecourse"] = self.basecourse
        self.options["chapter"] = self.chapter
        self.options["subchapter"] = self.subchapter

res = ""
    # Add all of the possible answers
    okeys = list(node.dnd_options.keys())
    okeys.sort()
    for k in okeys:
        if "match" in k:
            x, label = k.split("_")
            node.dnd_options["dnd_label"] = label
            dragE, dropE = node.dnd_options[k].split("|||")
            node.dnd_options["dragText"] = dragE
            node.dnd_options["dropText"] = dropE
            res += node.template_option % node.dnd_options
    res += node.template_end % node.dnd_options
    self.body.append(res)

    addHTMLToDB(
        node.dnd_options["divid"],
        node.dnd_options["basecourse"],
        "".join(self.body[self.body.index(node.delimiter) + 1 :]),
    )

    self.body.remove(node.delimiter)

:http: http

    :copyright: (c) 2012 by Danilo Bargen.
    :license: BSD 3-clause
"""

def align(argument):
    """Conversion function for the "align" option."""
    return directives.choice(argument, ('left', 'center', 'right'))

def httpOption(argument):
    """Conversion function for the "http" option."""
    return directives.choice(argument, ('http', 'https'))


class IframeVideo(RunestoneIdDirective):
    has_content = False
    required_arguments = 1
    optional_arguments = 0
    final_argument_whitespace = False
    option_spec = {
        'height': directives.nonnegative_int,
        'width': directives.nonnegative_int,
        'align': align,
        'http': httpOption,
        'divid': directives.unchanged
    }
    default_width = 500
    default_height = 281

    def run(self):
        super(IframeVideo, self).run()

TEXTAREA_REPLACEMENT_STRING = """
.. raw::
 html

 <textarea class="code_snippet"></textarea><br>

..

"""
#
# _LpBuildButtonDirective
# ^^^^^^^^^^^^^^^^^^^^^^^
# This inserts a "save and run" button, along with the HTML/JavaScript which causes the current page to be tested by compiling and running it with its test bench, then reporting the results to the user. It must only be used on pages that are a program and have a test bench associated with them. Only one should appear on a given page.
class _LpBuildButtonDirective(RunestoneIdDirective):
    # The required argument is an id_ for this question.
    required_arguments = 1
    # No optional arguments.
    optional_arguments = 0
    # Per http://docutils.sourceforge.net/docs/howto/rst-directives.html, True if content is allowed. However, this isn't checked or enforced.
    has_content = False
    # Options. Everything but language is currently ignored. This is based on activecode, so in the future similar support would be provided for these options.
    option_spec = RunestoneIdDirective.option_spec.copy()
    option_spec.update(
        {
            "include": directives.unchanged,
            "language": directives.unchanged,
            "timelimit": directives.unchanged,
            "stdin": directives.unchanged,
            "datafile": directives.unchanged,
            "available_files": directives.unchanged,

:breakline: Line to stop on and pop up a question dialog
   :python: either py2 or py3

    x = 0
    for i in range(10):
       x = x + i


config values (conf.py): 

- codelens_div_class - custom CSS class of the component's outermost div
    """

    required_arguments = 1
    optional_arguments = 1
    option_spec = RunestoneIdDirective.option_spec.copy()
    option_spec.update(
        {
            "tracedata": directives.unchanged,
            "caption": directives.unchanged,
            "showoutput": directives.flag,
            "question": directives.unchanged,
            "correct": directives.unchanged,
            "feedback": directives.unchanged,
            "breakline": directives.nonnegative_int,
            "python": directives.unchanged,
        }
    )

    has_content = True

    def run(self):

class SpreadSheet(RunestoneIdDirective):
    """
    .. spreadsheet:: uniqueid
        :fromcsv: path/to/csv/file
        :colwidths: list of column widths
        :coltitles: list of column names
        :mindimensions: mincols, minrows  -- minDimensions:[10,5]

        A1,B1,C1,D1...
        A2,B2,C2,D2...
    """

    required_arguments = 1
    optional_arguments = 5
    has_content = True
    option_spec = RunestoneIdDirective.option_spec.copy()
    option_spec.update(
        {
            "fromcsv": directives.unchanged,
            "colwidths": directives.unchanged,
            "coltitles": directives.unchanged,
            "mindimensions": directives.unchanged,
        }
    )

    def run(self):
        super(SpreadSheet, self).run()
        env = self.state.document.settings.env

        self.options["divid"] = self.arguments[0].strip()

        if "====" in self.content:

self.body.append(res)


# Templates to be formatted by node options
TEMPLATE_START = """
    <div id="%(divid)s" class="full-width container question" data-component="question">
    <ol class="arabic"><li class="alert alert-warning">

    """
TEMPLATE_END = """
    </li></ol>
    </div>
    """


class QuestionDirective(RunestoneIdDirective):
    """
.. question:: identifier
   :number: Force a number for this question

   Content  everything here is part of the question
   Content  It can be a lot...
    """

    required_arguments = 1
    optional_arguments = 0
    final_argument_whitespace = True
    has_content = True
    option_spec = RunestoneIdDirective.option_spec.copy()
    option_spec.update({"number": directives.positive_int})

    def run(self):