Javascript 带有可拖动/可排序选项的Bug

背景：我正在使用一个电子学习平台，该平台向学生们提出一系列问题，包括4个选项，以确定什么样的职业道路最适合他们。我们最近决定转向一种配置，在这种配置中，我们不会让他们做出只选择一个#1选项的艰难决定，而是允许他们对拖放列表进行排序，以便按照他们的偏好顺序对4个选项进行排序

问题是，系统的设计仍然只关心他们放在第一位的东西。如果你愿意，可以称之为反向心理学。每个选项的权重都是1-4，它们并不总是按照这个顺序出现，所以你可以对它们重新排序，它会将权重添加到你的跑步总分中，然后会有一系列的分数来决定你适合的位置

该系统运行良好，即使我处理数据的方法是非正统的（保留一个运行总数并将其反馈到URL中以便携带-我不担心篡改，因为数字的准确性是为了学生的利益。如果他们想要修补它，他们可以为错误结果自责：D）

这里有一个错误：如果学生不接触排序列表-即决定他们喜欢在页面上加载选项的顺序-更新跑步总分的行不会运行。只有当他们移动一些东西时，它才会运行。即使#1选项保持不变，但其他内容被移动，它仍然可以正常工作-但如果他们根本不碰它，它会保留上一个问题的值，有效地将“0”添加到他们的分数中，这确实会影响结果

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

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

老实说，我偷工减料地操纵了它，以至于我甚至不完全理解“数据”如何知道第一个选项是什么，但这就是操作发生的地方，它用新的分数重置了一个隐藏的输入（稍后传递到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>

$（文档）.ready（函数（）{
$（函数（）{
$（“#qoptions ul”）.sortable（{opacity:0.8，游标：'move'，update:function（）{
变量顺序=$（this）.sortable（“序列化”）；
var runningTotalCurrent=“”；
$.get（“/logic_gettopankeditem.php”，{rand:Math.random（），sortableData:encodeURIComponent（order）}）
.完成（功能（数据）{
var runningTotalNew=parseInt（runningTotalCurrent）+parseInt（data）；
document.getElementById（“runningTotal”）.value=parseInt（runningTotalNew）；
});
}                                 
});
});
}); 
函数nextQuestion（）{
//一些信息来解决这个问题
var=15；
var currentQuestion=；
var thisPage=“/investments/skills/”；
var completePage=“/investments/skills/complete/”；
var userSalt=；
//逻辑
如果（当前问题总数问题）{
//不可能，把它弄出来
window.location=“/404”；
}
}
在
//逻辑
部分，您引用
runningTotal
元素，即使您没有使用当前最顶层的元素写入它（即，它保持与最初使用PHP呈现页面时相同的值）。也许在拖动事件处理程序中，您可以编写一个全局JS值来表示发生了拖动？然后在您的
nextQuestion（）
中，您可以检测到这一点，并在没有发生拖动的情况下添加最大值。