Question

我正在构建一个测验，询问用户6个问题。有些问题会将答案选项显示为下拉列表。其他人使用单选按钮。有些问题还会在表单字段下方显示提示。

在测验结束时，测验会根据之前的答案加总得分，并告诉他或她是否有心脏病发作的风险。

显示问题及其提示的最佳方式是什么（如果有的话）？将它们保存在HTML文件中并使用JavaScript隐藏和显示？或者将问题和选项移动到JS文件中的数组中 - 在这种情况下，我如何控制问题生成的表单输入？

还是其他什么？

以下是HTML中的问题：

<section class="questions">
    <h2 class="outline">Question</h2>

    <p class="questionNumber">Question 1 of 5</p>

    <div class="questionAge">
      <p class="questionText">What is your age range?</p>

      <form>
        <select>
          <option value="20-34">
            20-34
          </option>

          <option value="35-39">
            35-39
          </option>

          <option value="40-44">
            40-44
          </option>

          <option value="45-49">
            45-49
          </option>

          <option value="50-54">
            50-54
          </option>

          <option value="55-59">
            55-59
          </option>

          <option value="60-64">
            60-64
          </option>

          <option value="65-69">
            65-69
          </option>

          <option value="70-74">
            70-74
          </option>

          <option value="75-79">
            75-79
          </option>
        </select>
      </form>
    </div><!--end questionAge -->

    <div class="questionCholesterol">
      <p class="questionText">What is your total cholesterol?</p>

      <form>
        <select>
          <option value="Less than 160">
            Less than 160
          </option>

          <option value="160-199">
            160-199
          </option>

          <option value="200-239">
            200-239
          </option>

          <option value="240-279">
            240-279
          </option>

          <option value="Greater than 279">
            Greater than 279
          </option>
        </select>
      </form>

      <div class="tip">
        <p>Don't know your total cholesterol? Attend one of our free
        screenings. <a href="http://www.chsbuffalo.org/events" target=
        "_blank">Click here to view upcoming screenings in our events
        calendar.</a></p>
      </div>
    </div><!-- end cholesterol -->

    <div class="questionSmoker">
      <p class="questionText">Are you a smoker?</p>

      <form>
        <input name="smoker" type="radio" value="Yes">Yes<br>
        <input name="smoker" type="radio" value="No">No<br>
      </form>
    </div><!-- end questionSmoker -->

    <div class="questionHDL">
      <p class="questionText">What is your high-density lipoprotein (HDL)
      cholesterol level?</p>

      <form>
        <select>
          <option value="60">
            60
          </option>

          <option value="50-59">
            50-59
          </option>

          <option value="40-49">
            40-49
          </option>

          <option value="Less than 40">
            Less than 40
          </option>
        </select>
      </form>

      <div class="tip">
        <p>HDL cholesterol is also known as “good” cholesterol. If you
        don’t know your HDL level, ask your doctor for a cholesterol
        test.</p>

        <p>Don’t have a doctor? <a href=
        "http://www.chsbuffalo.org/physicians">Click here to find a primary
        care doctor near you.</a></p>
      </div>
    </div><!-- end questionHDL -->

    <div class="questionMed">
      <p class="questionText">Are you on blood pressure medication?</p>

      <form>
        <input name="medication" type="radio" value="Yes">Yes<br>
        <input name="medication" type="radio" value="No">No<br>
      </form>
    </div><!-- end questionMed -->

    <div class="questionSBP">
      <p class="questionText">What is your Systolic Blood Pressure reading
      (first number)?</p>

      <form>
        <select>
          <option value="Less than 120">
            Less than 120
          </option>

          <option value="120-129">
            120-129
          </option>

          <option value="130-139">
            130-139
          </option>

          <option value="140-159">
            140-159
          </option>

          <option value="Greater than 159">
            Greater than 159
          </option>
        </select>
      </form>

      <div class="tip">
        <p>Don't know your blood pressure? Attend one of our free
        screenings. <a href="http://www.chsbuffalo.org/events" target=
        "_blank">Click here to view upcoming screenings in our events
        calendar.</a></p>
      </div>
    </div><!-- end questionSBP -->

    <form name="next">
      <input type="submit" value="Next">
    </form>
  </section><!-- end questions -->

Answer 1

这是一种非常基本的方法

jquery的：

$(":input").change(function(){
    $(this).parents("div").addClass("hideMe");
    $(this).parents("div").next("div").removeClass("hideMe");
});

为了完成这项工作，我创建了一个名为class的新"hideMe"，其中除了第一个问题之外的所有问题都必须从中开始，但是当选择/回答上面的function时，会添加class到当前select/input的父div，并从包含问题的下一个class中移除所述div

这是JSFIDDLE显示其工作原理

希望这会有所帮助，让你走上正轨

Answer 2

您有丰富的设计选择。我的投票是保留你的数据＆＃34;与你的＆＃34;显示逻辑＆＃34;分开。您可能希望从现在起添加或删除或更改数据月份，如果该数据位于可以加载的某个外部文件中，您将会好得多。您还可以使用Ajax调用从您的网站动态加载数据。

你的下一个难题是存储数据的格式.JSON最容易进行JavaScript处理，但XML甚至纯文本（可能带有标记处理器）也可以使用。

我也明白，有许多预先存在的＆＃34;测验＆＃34;处理器免费提供。

如果您希望在创建问题和答案时进行协作，请考虑将数据存储在某种形式的数据库引擎中，这可能会在您的网站上提供。然后你可以提供一个＆＃34;前端＆＃34;用户可以用来填充/编辑问题。

使用JavaScript隐藏和显示测验问题

2 个答案: