How to use the runestone.common.runestonedirective.RunestoneIdDirective function in runestone

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

: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,

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):

#     "b"
#   ],
#   "stdout": "1\n",
#   "func_name": "",
#   "stack_to_render": [],
#   "globals": {
#     "a": 1,
#     "b": 1
#   },
#   "heap": {},
#   "line": 5,
#   "event": "return"
# }


class Codelens(RunestoneIdDirective):
    """
.. codelens:: uniqueid
   :tracedata: Autogenerated or provided
   :caption: caption below
   :showoutput: show stdout from program
   :question: Text of question to ask on breakline
   :correct: correct answer to the question
   :feedback: feedback for incorrect answers
   :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

res += TEMPLATE_OPTION % node.poll_content
    res += TEMPLATE_END

    addHTMLToDB(node.poll_content["divid"], node.poll_content["basecourse"], res)
    self.body.append(res)


def depart_poll_node(self, node):
    """ This is called at the start of processing a poll node.  If poll had recursive nodes
        etc and did not want to do all of the processing in visit_poll_node any finishing touches could be
        added here.
    """
    pass


class Poll(RunestoneIdDirective):
    """
.. poll:: identifier
    :scale:   Setting the scale creates an "On a scale of 1 to " type of question
    :allowcomment: Boolean--provides comment box
    :option_1: Providing Question text for each option creates a "Choose one of these options" type of poll.
    :option_2: Option 2
    :option_3: Option 3    ...etc...(Up to 10 options in mode 2)
    :results: One of all, instructor, superuser - who should see results?


config values (conf.py):

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

    required_arguments = 1

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)


class DragNDrop(RunestoneIdDirective):
    """
.. dragndrop:: identifier
    :feedback: Feedback that is displayed if things are incorrectly matched--is optional
    :match_1: Draggable element text|||Dropzone to be matched with text
    :match_2: Drag to Answer B|||Answer B
    :match_3: Draggable text|||Text of dropzone
    etc. (up to 20 matches)

    The question goes here.

config values (conf.py): 

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

    required_arguments = 1

Arguments:
        - `self`:
        - `content`:
        """
        super(SpreadSheetNode, self).__init__(**kwargs)
        self.ss_options = content


#
# The spreadsheet class implements the directive.
# When the directive is processed the run method is called.
# This allows us to handle any arguments, and then create a node or nodes to insert into the
# document tree to be rendered when the tree is written.
#
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(