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

我有一个从github源代码修改的页面，以满足我的需要

基本上，这是一个认知测试，显示一个颜色不同的单词，如红色，但颜色为绿色，然后用户有4个选项来选择单词的正确颜色

我在js文件中有一个

Record

函数，它记录了回答问题所花的时间和总时间，并在测试结束时输出到CSV文件

同时，我希望记录到CSV：在每个问题中显示的特定单词、显示的单词的颜色以及用户回答的内容。可能吗

JS:

var COLORS=新数组(
“红色”，
“蓝色”，
“绿色”，
“黄色”，
“黑色”，
“粉红”，
//“棕色”，
“#FE642E”，
“紫色”，
“灰色”
);
//文本可以是任何内容。
var TEXT=新数组(
“红色”，
“蓝色”，
“绿色”，
“黄色”，
“黑色”，
“粉红”，
//“棕色”，
“橙色”，
“紫色”，
“灰色”
);
var info=新数组（[“姓名”、[“年龄”、[“年龄”、[“日期”、“]”、[“性别”、“]”、[“教育”、“]），
【图格妈妈】、【地点】、【地点】；
var formObj=document.getElementById（'han-form'）；
var IntroObj=document.getElementById（'han-Intro'）；
var InstructionsObj=document.getElementById（“指令”）；
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最大计数
函数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]；
}
功能配平（stringToTrim）{
返回stringToTrim.replace（/^\s+|\s+$/g，“”）；
}
函数验证（）{
if（trim（document.getElementById（'AGE'）.value）=“”）
{ 
提醒（“请填写您的年龄”）；
document.getElementById（'AGE'）.focus（）；
返回false；
}
if（trim（document.getElementById（'sex'）.value）==“”）
{ 
提醒（“请填写您的性别”）；
document.getElementById（'sex'）.focus（）；
返回false；
}
if（trim（document.getElementById（'MT'）.value）==“”）
{ 
提醒（“请填写您的母语TONGE”）；
document.getElementById（'MT'）.focus（）；
返回false；
}
var d=新日期（）；
info[1][4]=document.getElementById（'AGE'）。值；
info[2][5]=d.toDateString（）；
info[3][6]=document.getElementById（'sex'）.value；
info[5][7]=document.getElementById（'MT'）。值；
指令（）；
}
功能指令（）{
IntroObj.style.display='None'；
hanIntro.style.display='None'；
formObj.style.display='None'；
指令obj.style.display='block'；
}
函数Demo（）
{
最大计数=5；
hanTitle.style.display='None'；
说明obj.style.display='None'；
Start.style.display='block'；
document.getElementById（'timetext'）.innerHTML=“这是一个有5个问题的示例测试：”；
var initial=document.getElementById（'time'）.innerHTML；
var timeElement=document.getElementById（'time'）；
var myVar=setInterval（函数（）{myTimer（）}，1000）；
函数myTimer（）{
初始值=初始值-1；
//警报（“时间元素”的类型）；
if（timeElement.innerHTML！=“0”）
{
timeElement.innerHTML=初始值；
}
其他的
{
净距（myVar）；
问题（）；
}
}
}
函数开始测试（）{
hanTitle.style.display='None'；
说明obj.style.display='None'；
Start.style.display='block'；
Content.style.display='None'；
opt.style.display='None'；
初始值=5；
document.getElementById（'time'）.innerHTML=“5”；
document.getElementById（'timetext'）.innerHTML=“测试从：”；
var timeElement=document.getElementById（'time'）；
var myVar=setInterval（函数（）{myTimer（）}，1000）；
函数myTimer（）{
初始值=初始值-1；
//警报（“时间元素”的类型）；
if（timeElement.innerHTML！=“0”）
{
timeElement.innerHTML=初始值；
}
其他的
{
净距（myVar）；
问题（）；
}
}
}
函数重载（）{
location.reload（）；
}
var结果=新数组（[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=“红色”；
var lastTextIndex=“红色”；
var a；
var计数=0；
var得分=0；
var TotalTime=0；
函数问题（）{
document.getElementById（'startstop'）.style.display='None'；
Content.style.display='block'；
opt.style.display='block'；
var选项=新数组（4）；
var散列=[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（））；
}
//不要重复上一篇课文。
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（））；
选项[AnswerIndex]=文本[colorIndex]；
hash[colorIndex]=1；
对于（i=0；i<4；i++）{
如果（i！=应答索引）
{
while（true）
{
Index=Math.floor（COLORS.length*Math.random（））；
if（散列[索引]！=1）{
选项[i]=文本[索引]；
散列[索引]=1；
打破
}
}
}
}
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=文本索引；
 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);
  } 
}