Question

背景：我正在使用一个电子学习平台，向学生提出一系列问题，并提供4个选项，以确定最适合他们的职业道路。我们最近决定采用一种配置，而不是让他们通过选择一个＃1选项的困难决定，我们将允许他们对拖放列表进行排序，以按优先顺序排列4个选项。

问题在于，系统的设计仍然只关心他们首先放置的东西。如果愿意，可以称之为反向心理学。每个选项的权重为1-4 - 并且它们不会总是以该顺序显示 - 因此您对它们进行重新排序，它会增加您的总体得分的权重，以及之后的得分范围确定你适合的地方。

系统工作得很好，即使我处理数据的方法是非正统的（保持运行总量并将其反馈到URL中以便随身携带 - 我不担心因为数字的准确性而被篡改是为了学生的利益。如果他们想修补它，他们可以责怪自己的错误结果：D）

以下是错误：如果学生没有触及排序列表 - 即决定他们喜欢在页面上加载的选项顺序 - 更新运行总分不会运行。只有当它们移动时它才会运行。即使＃1选项保持不变，但其他东西移动，它仍然可以正常工作 - 但如果他们根本不触摸它，它会保留上一个问题的值，有效地添加＆＃34; 0＆＃34 ;他们的分数和影响结果。

跳转后的代码，但首先我想我会特别引用更新总数的行：

.done(function(data) {
                    var runningTotalNew = parseInt(runningTotalCurrent) + parseInt(data);
                    document.getElementById("runningTotal").value = parseInt(runningTotalNew);
            });

说实话，我把它弄得很糟糕，以至于我甚至不能完全理解＆＃34;数据＆＃34;知道第一个选项是什么，但是那个动作发生的地方，它会使用新的分数重置隐藏的输入（后来传入URL）。它完全接近完整代码的顶部：

    <script type="text/javascript">
$(document).ready(function(){   
    $(function() {
    $("#qoptions ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
            var order = $(this).sortable("serialize"); 
            var runningTotalCurrent = "<?php echo $_GET['rt']; ?>";
            $.get("/logic_getTopRankedItem.php", { rand: Math.random(), sortableData: encodeURIComponent(order) })
                .done(function(data) {
                    var runningTotalNew = parseInt(runningTotalCurrent) + parseInt(data);
                    document.getElementById("runningTotal").value = parseInt(runningTotalNew);
            });
        }                                 
        });
    });
}); 
    </script>
    <script type="text/javascript">
    function nextQuestion() {
        // Some info to figure this out
        var totalQuestions = 15;
        var currentQuestion = <?php echo $_GET['page']; ?>;
        var thisPage = "/questionnaires/skills/";
        var completePage = "/questionnaires/skills/complete/";
        var userSalt = <?php echo $_GET['salt']; ?>;

        // The logic
        if(currentQuestion <= totalQuestions) {
            var nextQuestion = currentQuestion + 1;
            if(nextQuestion <= totalQuestions) {
                window.location = thisPage + userSalt + "/" + nextQuestion + "/" + parseInt(document.getElementById("runningTotal").value);
            }
            if(nextQuestion > totalQuestions) {
                window.location = completePage + parseInt(document.getElementById("runningTotal").value);
            }
        }
            if(currentQuestion > totalQuestions) {
            // Not possible, 404 it out
                window.location = "/404";
        }
    }
    </script>
<?php
    // Only show "let's get started" if they're on the first question.
        if($_GET['page'] == "1")
        {
        echo "<div align=\"center\">\r\n";
        echo "<h1>let's get started.</h1>\r\n";
        echo "</div>\r\n";
        }

    // Load question/weight data from data file
    include($_SERVER['DOCUMENT_ROOT']."/data/questionnaire_skills.php");

    // Determine current question from page number
    $currentQ = $_GET['page'];

    // Determine current running total, which the website sets to 0 at survey start
    $runningTotal = $_GET['rt'];
?>

          <div style="padding-top: 15px;"></div>

          <div style="width: 610px; margin: auto;">
          <p style="font-size: 16px;" align="center">
          For each option set, <strong>rank the options from <i>most</i> preferred to <i>least</i> preferred</strong> to indicate the skill you'd like to use most in your next career move.
          </p>
          </div>

          <table border="0" align="center" width="625" height="175">
            <tr>
                <td style="width: 75px; background: url('/images/pref_spec.png') no-repeat;" valign="top"><!-- Preference Spectrum --></td>
                <td style="width: 550px;">
          <!-- Begin options drag n drop -->
          <div id="qoptions">
              <ul>
                  <li id="option_<?php echo $weight[$currentQ][1]; ?>"><?php echo $option[$currentQ][1]; ?>
                      <div class="clear"></div>
                  </li>
                  <li id="option_<?php echo $weight[$currentQ][2]; ?>"><?php echo $option[$currentQ][2]; ?>
                      <div class="clear"></div>
                  </li>
                  <li id="option_<?php echo $weight[$currentQ][3]; ?>"><?php echo $option[$currentQ][3]; ?>
                      <div class="clear"></div>
                  </li>
                  <li id="option_<?php echo $weight[$currentQ][4]; ?>"><?php echo $option[$currentQ][4]; ?>
                      <div class="clear"></div>
                  </li>
              </ul>
          </div>
          <!-- End options drag n drop -->
          <!-- Start options form handler -->
          <form name="optionsHandler">
                <input type="hidden" name="runningTotal" id="runningTotal" value="<?php echo $runningTotal; ?>" />
          </form>
          <!-- End options form handler -->
          <!-- Button to push all this data into the next question in an informal cookie -->
          <p align="center">
          <a href="javascript:nextQuestion();" class="btn btn-success btn-lg" style="font-family: 'Ubuntu';" role="button">continue &raquo;</a>
          </p>
                </td>
            </tr>
          </table>

不要担心它在/ data /中引用的PHP文件 - 它只包含权重和选项，它只是一堆数组。我认为这是jQuery处理可排序数据的问题。 FWIW，它使用Bootstrap，它是我第一次进入Bootstrap和一个如此密集的数据处理应用程序。

有可拖动/可排序选项的错误

0 个答案: