javascript - 如何随机排序/呈现一组调查提示（并以正确的顺序保存响应）？

Question

我正在尝试更改由其他人编写的 .js 文件。目前，该脚本提供一组试验，并且在每次试验时，将用户对一组提示（在prompts变量中定义）的响应写入服务器上的一个文件。

但是，对于每个刺激，提示都以相同的顺序显示。我想更改它，以便在试验中随机排列顺序。

这是之前的代码：

function voteMultipleObj(prompts) {
    thisTask = this;
    this.saveFile = 'save.php';
    this.prompts = prompts;
    this.csvHeader = 'SubjID,Study,Name,Trial,Picture,' +  Array.prototype.join.call(this.prompts, ',') + ',Response Time,Instructions Time\n';
    this.answerWidth = '80px';
    this.answerHeight = '30px';
    this.$frame = $('.trial');
    this.$prompt = $('<h2 id="prompt" style="display:none">Rate this stimulus</h2>');
    this.$stim = $('<table id="imageTable" style="margin-left:auto;margin-right:auto"><tr><td id="image"></td></tr></table>');
    this.$answerDiv = $('<div id="answerDiv" style="display:none"><table><tr></tr></table></div>');
    this.folder = 'ratings';
    this.suffix = '_ratings';

    this.setThisTask = function () {
        thisTask = this;
    }
    
    this.setCSS = function () {
        this.$frame
            .css('background-color',this.background_color)
            .css('color',this.color)
            .height(this.height);
        $('#imageTable').css('margin-top','3vh')
            .css('margin-bottom','3vh');
        $('#answerDiv').css('height','40vh')
            .css('width', '900px')
            .css('overflow-y', 'auto');
    }
    
    this.setClickEvents = function () {
        $('#begin').one('click', function () {thisTask.setInstructionsTime()});
        $('#begin').one('click', function () {thisTask.startTask()});
    }

    this.hideParts = function () {
        $('#answers').hide();
        $('#answerDiv').hide();
        $('#image').hide();
    }

    this.showParts = function () {
        $('#answers').show();
        $('#answerDiv').show();     
        $('#answerDiv').scrollTop(0);
        $('#image').show();
        $('#prompt').show();
    }

    this.writeStim = function (stim) {
        if (isPicFiletype(stim)){
            var $toAppend = this.appendImg(stim);
        } else {
            var $toAppend = this.appendP(stim);
        }
        $('#image').empty()
            .html($toAppend)
            .css('height', this.picHeight);
    }

    this.writeLine = function () {
        this.csvLine = subjID + ",";
        this.csvLine += study + ",";
        this.csvLine += this.name + ",";
        this.csvLine += this.counter + ",";
        this.csvLine += this.picsToDisplay[0] + ",";
        this.csvLine += Array.prototype.join.call(this.currentResp, ',') + ",";
        this.csvLine += this.trialRT + ",";
        this.csvLine += this.instructionsTime + "\n";
    }

    this.setAnswerCSS = function () {
        $('#prompt').css('margin-left','auto').css('margin-right','auto');
        $('.answer').width(this.answerWidth).height(this.answerHeight);
        $('#answerDiv>table').css('margin-left','auto')
            .css('margin-right','auto');
    }

    this.writeAnswers = function (trialScale) {
        var $answers = $('<tr></tr>');
        for (var j = 0; j < this.prompts.length; j++) {
            $answers.append($('<tr></tr>').html(this.prompts[j]));
            var $tr = $('<tr></tr>');
            $tr.addClass(j);
            for (var i = 1; i <= this.trialScale.length; i++) {
                var $td = $('<td class="answers"></td>');
                $td.attr('id', i)
                    .html(this.trialScale[i-1])
                    .addClass('answer')
                    .on('click', function () {
                        $(this).siblings().removeClass('selected')
                        $(this).addClass('selected')
                        $('.selected')
                        .css('box-shadow','inset 0px 0px 2px 2px #FFD859')
                        .css('-webkit-box-shadow','inset 0px 0px 2px 2px #FFD859')
                        .css('-moz-box-shadow','inset 0px 0px 2px 2px #FFD859');
                    $('#answerDiv td').not('.selected')
                        .css('box-shadow','inset 0px 0px 0px 0px #FF0000')
                        .css('-webkit-box-shadow','inset 0px 0px 0px 0px #FFD859')
                        .css('-moz-box-shadow','inset 0px 0px 0px 0px #FFD859');
                    })
                .on('mouseover', function () {
                    $(this).css('background-color', 'rgb(0,0,175)')
                    .css('color','white');})
                    .on('mouseout', function () {
                        $(this).css('background-color', 'rgb(225,225,225)')
                        .css('color','black');})
                    $tr.append($td);
            };
            $answers.append($tr);
        }
        $('#answerDiv>table').html($answers);
        var $next = $('<input type="button" value="Next" />');
        $next.on('click', function () {
            if ($('.selected').length == thisTask.prompts.length){
                var resps = $('.selected').map(function(i, td) {return $(td).attr('id');})
                thisTask.makeResponse(resps);
                $('td').removeClass('selected')
                        .css('box-shadow','inset 0px 0px 0px 0px #FFD859')
                        .css('-webkit-box-shadow','inset 0px 0px 0px 0px #FFD859')
                        .css('-moz-box-shadow','inset 0px 0px 0px 0px #FFD859');
        ; }
        });
        $next.mouseenter(function() {
            $next.css({'color':'blue','font-weight':'bold','background-color':'#A9A9A9'});
        }); 
        $next.mouseleave(function() {
            $next.css({'color':'black','font-weight':'normal','background-color':'#D1D1D1'});
        });
        $('#answerDiv').append($next);

    };


    this.makeResponse = function (resp) {
        this.setCurrentResp(resp);
        this.checkAcc();
        this.$frame.hide();
        this.setTrialRT();
        this.setCounter(this.counter + 1);
        this.writeLine();
        this.writeCSV(true);
        this.dequeueTrial();
        this.loadTrial();
    }

}
voteMultipleObj.prototype = new Task();

我尝试在重新排列“提示”数组的脚本顶部插入一个 shuffle 函数：

//this is a shuffle function that rearranges an array
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

function voteMultipleObj(prompts) {
    thisTask = this;
    this.saveFile = 'save.php';
    prompts = shuffle(prompts);
    this.prompts = prompts;

//etc...

但它只会在我第一次加载页面时随机播放，以后再也不播放了。我还尝试使用 setInterval 添加一个计时器，以便“提示”数组每 500 毫秒洗牌一次，但同样，它只洗牌一次。

我怀疑我需要在this.writeAnswers块中实现随机化，但我不确定如何执行此操作。

任何帮助将不胜感激。

标签： javascriptshuffle