记录并将用户输入发送到CSV

Question

我有一个"Stroop test"页面，我从github源代码修改，以满足我的需求。

基本上它是一个认知测试，它显示一个带有不同颜色名称的彩色单词，如单词Red，但是用绿色着色，然后用户有4个选项来选择正确的单词颜色。

我在js文件中有一个Record函数，它记录了回答问题所花费的时间和总时间，并在测试结束时输出到CSV文件。

但是，我还希望记录到该CSV：在每个问题中显示的特定单词，显示的单词的颜色以及用户回答的剂量。有可能吗？

JS：

 var COLORS = new Array(
  "red",
  "blue",
  "green",
  "yellow",
  "black",
  "pink",
  //"brown",
  "#FE642E",
  "purple",
  "gray"
);
// Text can be anything.
var TEXT = new Array(
  "RED",
  "BLUE",
  "GREEN",
  "YELLOW",
  "BLACK",
  "PINK",
  //"BROWN",
  "ORANGE",
  "PURPLE",
  "GRAY"
);

var info = new Array(["Name",""],["AGE",""],["Date",""],["Sex",""],["Education",""],
                      ["Mother Tougue",""],["Place",""]);
var formObj=document.getElementById('han-form');
var IntroObj=document.getElementById('han-Intro');
var InstructionsObj=document.getElementById('instructions');
var Start=document.getElementById('startstop');
var hanTitle=document.getElementById('han-title');
var hanIntro=document.getElementById('han-Intro');
var Content=document.getElementById('content');
var name=document.getElementById('names');
var opt=document.getElementById('options');
var maxCount

function form1 () {
  formObj.style.display='block';
  IntroObj.style.display='None';
  hanIntro.style.display='None';
  document.getElementById('AGE').value=info[1][2];
  document.getElementById('MT').value=info[5][3];
}

function trim(stringToTrim) {
  return stringToTrim.replace(/^\s+|\s+$/g,"");
}

function validate () {
  if(trim(document.getElementById('AGE').value)=="")
  { 
  alert("Please fill in your Age");
  document.getElementById('AGE').focus();
  return false;
  }
  if(trim(document.getElementById('sex').value)=="")
  { 
  alert("Please fill in your Gender");
  document.getElementById('sex').focus();
  return false;
  }
  if(trim(document.getElementById('MT').value)=="")
  { 
  alert("Please fill in your Native Tounge");
  document.getElementById('MT').focus();
  return false;
  }

  var d=new Date();
  info[1][4]=document.getElementById('AGE').value;
  info[2][5]=d.toDateString();
  info[3][6]=document.getElementById('sex').value;
  info[5][7]=document.getElementById('MT').value;
Instructions();
}

function Instructions () {
  IntroObj.style.display='None';
  hanIntro.style.display='None';
  formObj.style.display='None';
  InstructionsObj.style.display='block';
}

function Demo()
{
  maxCount=5;
  hanTitle.style.display='None';
  InstructionsObj.style.display='None';
  Start.style.display='block';
  document.getElementById('timetext').innerHTML="Here's an example test with 5 questions:";

  var initial=document.getElementById('time').innerHTML;
    var timeElement=document.getElementById('time');
    var myVar=setInterval(function () {myTimer()}, 1000);
    function myTimer () {
      initial=initial-1;
      //alert(typeof 'timeElement');
      if(timeElement.innerHTML!='0')
      {
          timeElement.innerHTML=initial;
      }
      else
      {
        clearInterval(myVar);
        Questions ();
      }
    }

}

function StartTest () {
  hanTitle.style.display='None';
  InstructionsObj.style.display='None';
  Start.style.display='block';
  Content.style.display='None';
  opt.style.display='None';
  initial=5;
  document.getElementById('time').innerHTML="5";
  document.getElementById('timetext').innerHTML="Test Starts In:";
    var timeElement=document.getElementById('time');
    var myVar=setInterval(function () {myTimer()}, 1000);
    function myTimer () {
      initial=initial-1;
      //alert(typeof 'timeElement');
      if(timeElement.innerHTML!='0')
      {
          timeElement.innerHTML=initial;
      }
      else
      {
        clearInterval(myVar);
        Questions ();
      }
    }
}

function reload () {
  location.reload();
}

var Result=new Array([1,0],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0],[8,0],[9,0],[10,0],
                     [11,0],[12,0],[13,0],[14,0],[15,0],[16,0],[17,0],[18,0],[19,0],[20,0],
                     [21,0],[22,0],[23,0],[24,0],[25,0],[26,0],[27,0],[28,0],[29,0],[30,0]);

var lastColorIndex="red";
  var  lastTextIndex="RED";
  var a;
  var Count=0;
  var Score=0;
  var TotalTime=0;

function Questions (){
  document.getElementById('startstop').style.display='None';
  Content.style.display='block';
  opt.style.display='block';
  var options=new Array(4);
  var hash = [0,0,0,0,0,0,0,0,0,0];
  var i=0;
  var colorIndex = Math.floor(COLORS.length * Math.random());
  while (colorIndex == lastColorIndex) 
  {
    colorIndex = Math.floor(COLORS.length * Math.random());
  }

  // Do not repeat last text.
  var textIndex = Math.floor(TEXT.length * Math.random());
  while (textIndex == lastTextIndex) {
    textIndex = Math.floor(TEXT.length * Math.random());
  }

  document.getElementById('content').innerHTML=TEXT[textIndex];
  document.getElementById('content').style.color=COLORS[colorIndex];
  AnswerIndex=Math.floor(options.length*Math.random());
  options[AnswerIndex]=TEXT[colorIndex];
  hash[colorIndex]=1;
  for (i =0 ; i < 4; i++) {
    if(i!=AnswerIndex)
      {
        while (true) 
        {
          Index = Math.floor(COLORS.length * Math.random());
          if (hash[Index]!=1) {
            options[i]=TEXT[Index];
            hash[Index]=1;
            break;
          }
        }
      }
  }
  document.getElementById('A').innerHTML=options[0];
  document.getElementById('B').innerHTML=options[1];
  document.getElementById('C').innerHTML=options[2];
  document.getElementById('D').innerHTML=options[3];

  lastColorIndex = colorIndex;
  lastTextIndex = textIndex;
   a = performance.now();
}

function Record (Answer) {
  var b = performance.now();
  if (maxCount==35)
  {
    Result[Count-5][8]=Math.round(((b-a)/1000)*100)/100;
    TotalTime=TotalTime+(b-a)/1000;
    if (document.getElementById(Answer).innerHTML==TEXT[lastColorIndex]) {
        Score+=1;
    }
  }
  Count+=1;
  if (Count<maxCount)
  {
    Questions();
  }
  else if(Count==5 && maxCount==5)
  {
    maxCount=35;
    StartTest();
  }
  else
  {
    document.getElementById('content').style.display='None';
    document.getElementById('options').style.display='None';
    var myChart = new JSChart('chartcontainer', 'line');
    myChart.setDataArray(Result);
    myChart.setSize(1300,500);
    myChart.setTitle('A customized chart');
    myChart.setAxisNameX('Questions');
    myChart.setAxisNameY('Time');
    myChart.setAxisPaddingBottom(40);
    myChart.setAxisPaddingLeft(50);
    myChart.setAxisPaddingRight(30);
    myChart.setAxisPaddingTop(50);
    myChart.draw();
    document.getElementById('score').innerHTML=Score;
    document.getElementById('totaltime').innerHTML=Math.round(TotalTime*100)/100;
    document.getElementById('chartcontainer').style.display='block';
    document.getElementById('endButton').style.display='block';
    var csvContent = "data:text/csv;charset=utf-8,";
    info.forEach(function(infoArray,index){dataString=infoArray.join(",");csvContent+=dataString+"\n";});
    csvContent+="Score"+","+Score+"\n";
    csvContent+="TotalTime"+","+Math.round(TotalTime*100)/100+"\n";
    Result.forEach(function(infoArray, index)
    {
    dataString = infoArray.join(",");
    csvContent += dataString + "\n";
    }); 

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "my_data.csv");
    link.click();
    window.open(encodedUri);
  } 
}

整个测试代码： JSfiddle