javascript - 如何将可滚动测验/表单中的进度条更改为看起来像时间线？

Question

我想在完成测验后创建一个测验(四个问题)和一个注册表单。

我开始使用 scrollable registration wizard脚本并创建了以下 jsfiddle:

http://jsfiddle.net/baumdexterous/HVX4C/

    <!-- twitter style "drawer" for displaying validation errors -->
    <div id="drawer">[ERROR MESSAGE]</div>

    <!-- the form -->
    <form action="#">

      <!-- scrollable root element -->
      <div id="wizard">

        <!-- status bar -->
        <ul id="status">
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>

        <!-- scrollable items -->
        <div class="items">
          <!-- pages -->
          <div class="page">[ Any HTML content ]</div><!-- 1 -->
          <div class="page">[ Any HTML content ]</div><!-- 2 -->
          <div class="page">[ Any HTML content ]</div><!-- 3 -->
          <div class="page">[ Any HTML content ]</div><!-- 4 -->
          <div class="page">[ Any HTML content ]</div><!-- 5 -->
          <div class="page">[ Any HTML content ]</div><!-- 6 -->
        </div>

      </div>
    </form>

如您所见，有四个问题，进入第 5 步后，您会看到一个注册表单。

我正在尝试以这样一种方式对其进行自定义，以便进度条包含时间线而不仅仅是数字，并让它指示用户的当前状态:

另外，我想要一个指示器来表示用户是否答对了问题:

关于如何实现此目标的任何想法？如有任何意见/建议，我们将不胜感激。非常感谢!

Answer 1

我能够回答问题的第一部分并将进度条更改为显示为时间线。见下文:

  <div id="wizard">
    <ul id="status">
      <li class="active" style="margin-left: -5px;"><p>1948</p></li>
      <li style="margin-left: 25px;"><p>1950</p></li>
      <li style="margin-left: 25px;"><p>1960</p></li>
      <li style="margin-left: 25px;"><p>1980</p></li>
      <li style="margin-left: 25px;"><p>1990</p></li>
      <li style="margin-left: 25px;"><p>2000</p></li>
    </ul>

http://jsfiddle.net/baumdexterous/vG7Uw/1/

现在我想弄清楚如何添加一个指示器来表示用户是否回答了问题。将遵循@Tip_Top 的建议，在用户继续之前获得一些验证。