How to use the xblock.fragment.Fragment function in XBlock

self.assertEqual(1, len(node))

        self.assertEqual('div', node[0].tag)
        self.assertEqual(1, len(node[0]))

        node = node[0][0]
        self.assertEqual('div', node.tag)
        self.assertEqual('xblock', node.attrib['class'])
        self.assertEqual('thumbs', node.attrib['data-block-type'])

        xsrf_token = utils.XsrfTokenManager.create_xsrf_token(
            xblock_module.XBLOCK_XSRF_TOKEN_NAME)
        self.assertEqual(xsrf_token, node.attrib['data-xsrf-token'])

        self.assertEqual(1, len(cxt.env['fragment_list']))
        self.assertIsInstance(cxt.env['fragment_list'][0], fragment.Fragment)

def student_view(self, context=None):  # pylint: disable=unused-argument
        """  Returns a fragment for student view  """
        fragment = Fragment(u"")
        fragment.add_javascript(load("static/js/injection.js"))

        # helper variables
        # pylint: disable=no-member
        in_studio_runtime = hasattr(self.xmodule_runtime, 'is_author_mode')
        index_base = 1
        default_tab = 'tab_{}'.format(self.tab_to - index_base)

        fragment.initialize_js(
            'FlowControlGoto',
            json_args={"display_name": self.display_name,
                       "default": default_tab,
                       "default_tab_id": self.tab_to,
                       "action": self.action,
                       "target_url": self.target_url,
                       "target_id": self.target_id,

def student_view(self, context=None):
        """
        The primary view of the OppiaXBlock, shown to students
        when viewing courses.
        """
        html = self.resource_string("static/html/oppia.html")
        frag = Fragment(html.format(self=self))
        frag.add_javascript_url(
            "//cdn.jsdelivr.net/oppia/0.0.1/oppia-player.min.js")
        frag.add_javascript(self.resource_string("static/js/oppia.js"))
        frag.initialize_js('OppiaXBlock')
        return frag

def student_view(self, context=None):
        prog = self.get_progress()
        context = {
            'element_id': self.location.html_id(),
            'id': self.id,
            'ajax_url': self.runtime.ajax_url,
            'progress_status': progress.Progress.to_js_status_str(prog),
            'progress_detail': progress.Progress.to_js_detail_str(prog)}
        content = self.runtime.render_template('problem_ajax.html', context)

        frag = xblock.fragment.Fragment()
        frag.add_css_url(self.runtime.local_resource_url(
            self, 'public/css/problem.css'))
        frag.add_javascript_url(
            '%s/MathJax.js?config=TeX-AMS-MML_HTMLorMML' % MATHJAX_URI)
        frag.add_javascript_url(self.runtime.local_resource_url(
            self, 'edx-platform/common/static/js/vendor/underscore-min.js'))
        frag.add_javascript_url(self.runtime.local_resource_url(
            self, 'edx-platform/common/static/coffee/javascript_loader.js'))
        frag.add_javascript_url(self.runtime.local_resource_url(
            self, 'edx-platform/common/static/coffee/capa/display.js'))
        frag.add_javascript_url(self.runtime.local_resource_url(
            self, 'public/js/problem.js'))
        frag.initialize_js('ProblemBlock')
        frag.add_content(content)
        return frag

def wrap_child(self, block, view, frag, context):  # pylint: disable=W0613
        wrapped = Fragment()
        wrapped.add_javascript_url('/static/js/vendor/jquery.min.js')
        wrapped.add_javascript_url('/static/js/vendor/jquery.cookie.js')

        data = {}
        if frag.js_init_fn:
            wrapped.add_javascript_url(
                '/static/js/runtime/%s.js' % frag.js_init_version)
            data['init'] = frag.js_init_fn
            data['runtime-version'] = frag.js_init_version
            data['usage'] = block.scope_ids.usage_id
            data['block-type'] = block.scope_ids.block_type

        if block.name:
            data['name'] = block.name

        html = u'<div class="xblock">%s</div>' % (

def problem_view(self, context=None):  # pylint: disable=W0613
        """Returns a view of the problem - a javascript text input field."""
        html = u"<input value="{0}" name="input" type="text"><span class="message"></span>".format(self.student_input)
        result = Fragment(html)
        result.add_javascript("""
            function TextInputBlock(runtime, element) {
                return {
                    submit: function() {
                        return $(element).find(':input').serializeArray();
                    },
                    handleSubmit: function(result) {
                        $(element).find('.message').text((result || {}).error || '');
                    }
                }
            }
            """)
        result.initialize_js('TextInputBlock')
        return result

def student_view(self, context=None):  # pylint: disable=W0613
        """
        Create a fragment used to display the XBlock to a student.
        `context` is a dictionary used to configure the display (unused)

        Returns a `Fragment` object specifying the HTML, CSS, and JavaScript
        to display.
        """

        # Load the HTML fragment from within the package and fill in the template
        html_str = pkg_resources.resource_string(__name__, "static/html/thumbs.html")
        frag = Fragment(unicode(html_str).format(self=self))

        # Load the CSS and JavaScript fragments from within the package
        css_str = pkg_resources.resource_string(__name__, "static/css/thumbs.css")
        frag.add_css(unicode(css_str))

        js_str = pkg_resources.resource_string(__name__,
                                               "static/js/src/thumbs.js")
        frag.add_javascript(unicode(js_str))

        frag.initialize_js('ThumbsBlock')
        return frag

def student_view(self, context):  # pylint: disable=W0613
        """Provide the default student view."""
        html = SLIDER_TEMPLATE.format(min=self.min_value,
                                      max=self.max_value,
                                      val=self.value)
        frag = Fragment(html)
        frag.add_css("input[type=range] { width=100px; }")
        frag.add_javascript(SLIDER_JS)
        frag.initialize_js('Slider')

        return frag

def fallback_view(self, view_name, context=None):  # pylint: disable=W0613
        """Provides a fallback view handler"""
        frag = Fragment(u"<div class="debug_child">%s<br>%s</div>" % (make_safe_for_html(repr(self)), view_name))
        frag.add_css("""
            .debug_child {
                background-color: grey;
                width: 300px;
                height: 100px;
                margin: 10px;
                padding: 5px 10px;
                font-size: 75%;
            }
            """)
        return frag

def get_frag(self, **context):  # pylint: disable=unused-argument
        return Fragment(u'[Here be Video]')