popup.html

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="popup.css" />
    </head>
    <body>
      <header>
        <h1>Coursera Checker</h1>
        <button id="reset-btn">Reset</button>
      </header>
      <h2>Info</h2>
      <p>
        Highlight your answer and then highlight the expected answer. Extraneous characters are stripped, and the texts are then compared. If they match, a green circle will show, otherwise a red circle will be displayed. To see more detailed results, open the developer console.
      </p>
      <img id="gif" src="images/demo.gif"/>
      <h2>Edit RegEx</h2>
      <p>
          To edit the regex used to strip content, use the form below.
      </p>
      <form id="pattern-form">
        <input type="text" id="pattern" name="pattern" />
        <input type="submit" id="submit-btn" />
      </form>
      <script src="popup.js"></script>
    </body>
  </html>