examples/course.html

<!DOCTYPE html>
<html>
 <head>
  <style>
   body {
    max-width: 1024px;
    margin: auto;
    font-family: sans-serif;
}

video {
    width: 800px;
}

iframe {
    width: 800px;
    height: 450px;
}
  </style>
 </head>
 <body>
  <h1 data-olx-course="mu" data-olx-org="overhangio" data-olx-url_name="session1">
   My course title
  </h1>
  <h2>
   Chapter 1
  </h2>
  <h3>
   Sequential 1.1
  </h3>
  <h4>
   Syllabus
  </h4>
  <section data-mu-type="video">
   <h5>
    Video
   </h5>
   <video controls>
    <source src="https://s3.amazonaws.com/edx-course-videos/edx-edx101/EDXSPCPJSP13-H010000_100.mp4" type="video/mp4">
    </source>
   </video>
  </section>
  <h5>
   Some html content
  </h5>
  <p>
   Each one of these paragraphs should result in a different
   <code>
    &lt;p&gt;
   </code>
   tag.
  </p>
  <p>
   We can even include images here:
  </p>
  <p>
   <img src="https://www.google.com/images/logo.png"/>
  </p>
  <p>
   Raw code:
  </p>
  <pre><code>import base64
base64.decodebytes(b'UmFjbGV0dGUgY2hlZXNlIGlzIHRoZSBiZXN0')</code></pre>
  <h4>
   Problems
  </h4>
  <section data-mu-type="mcq">
   <h5>
    Multiple choice question
   </h5>
   <p>
    What is the answer to Life, the Universe, and Everything?
   </p>
   <ul>
    <li>
     ✅ 6 x 7
    </li>
    <li>
     ❌ 666
    </li>
    <li>
     ❌ 0
    </li>
    <li>
     ✅ 42
    </li>
   </ul>
  </section>
  <section data-mu-type="ftq">
   <h5>
    Free text question
   </h5>
   <p>
    How many legs does a healthy snake have?
   </p>
   <ul>
    <li>
     None
    </li>
    <li>
     Zero
    </li>
    <li>
     0
    </li>
   </ul>
  </section>
 </body>
</html>