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

Question

我正在尝试在完成测验后创建一个测验（四个问题）和一个注册表单。

我开始使用可滚动的注册向导脚本并创建了以下 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 的建议，在用户继续之前进行一些验证。