根据选择选项google.script.run更改电子表格

时间:2018-06-23 15:17:34

标签: html google-sheets

我正在尝试进行一项测验,以根据单位将电子表格中所有问题的数据存储在不同的工作表中。

在访问电子表格中的数据并使用它方面,我一直遇到很大的问题,到目前为止,我已经做到了。也许不是最好的方法,但它可以工作。

现在,我想根据下拉列表中选择的值,在同一电子表格中将sheet1更改为sheet2

我该怎么做?选择了单位,则该值将必须传递到

google.script.run.withSuccessHandler.populateQuestions.getData()并

CODE.GS

function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  html.setTitle("QUIZ APP");

  return html; 
};


function getData(num){    
  return SpreadsheetApp.openById("1aVTxogVxIh9jIboiheY7KLrY1UbkLLFB8tCT1LRn1ic").getSheets()[num].getDataRange().getDisplayValues();     
};

INDEX.HTML

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>QUIZ APP</title>

    <style>   
      .btn {
          border: none;          
          padding: 1%;
          width: 98%;
          min-height: 3em;
          height: 100%;
          font-size: 1.2em;
          text-align: left;
          cursor: pointer;
          display: block;
          margin-bottom: 1em;
      }

      /* Gray */
      .default {
          color: black;
      }

      .default:hover {
          background: #e7e7e7;
      }
    </style>
</head>
<body>
  <h1>Quiz</h1>
  <select id="unit"> 
    <option value="0">u1</option>
    <option value="1">u2</option>
    <option value="2">u3</option>

  </select>
  <p><font id="correct" color="mediumseagreen"></font> / <font id="incorrect" color="tomato"></font> / <font id="total" color="dodgerblue"></font></p>

  <hr style="margin-bottom: 20px">

  <h2 id="question"></h2>
  <div>

  <button id="btn0" class="btn default" onclick="google.script.run.withSuccessHandler(nextQuestionA).getData(unit);"></button>
  <button id="btn1" class="btn default" onclick="google.script.run.withSuccessHandler(nextQuestionB).getData(unit);"></button>
  <button id="btn2" class="btn default" onclick="google.script.run.withSuccessHandler(nextQuestionC).getData(unit);"></button>
  <button id="btn3" class="btn default" onclick="google.script.run.withSuccessHandler(nextQuestionD).getData(unit);"></button>
  </div>

  <hr style="margin-top: 50px">


<script> 
 var n = 0;
 var correct=0,incorrect=0;

function populateQuestion(data){  

  var i,j,temp;  

    //reset color opts
    document.getElementById("btn0").style.backgroundColor= "#e7e7e7";
    document.getElementById("btn1").style.backgroundColor= "#e7e7e7";
    document.getElementById("btn2").style.backgroundColor= "#e7e7e7";
    document.getElementById("btn3").style.backgroundColor= "#e7e7e7";
    //set text question opts
    document.getElementById("question").innerHTML = n+1 + ") " + data[n][0];
    document.getElementById("btn0").innerHTML = data[n][1];
    document.getElementById("btn1").innerHTML = data[n][2];
    document.getElementById("btn2").innerHTML = data[n][3];
    document.getElementById("btn3").innerHTML = data[n][4];
    //progression questions
    document.getElementById("correct").innerHTML = correct;
    document.getElementById("incorrect").innerHTML = incorrect;
    document.getElementById("total").innerHTML = data.length;
  };


  function nextQuestionA(data){
  var answer = data[n][5];
  var answered = document.getElementById("btn0").innerHTML;
    if(answer==answered){
      document.getElementById("btn0").style.backgroundColor= "mediumseagreen";
      correct++;
    }
    else{
      document.getElementById("btn0").style.backgroundColor= "tomato";
      for(i=1;i<5;i++){
        if(data[n][i]==answer){
          document.getElementById("btn"+(i-1)).style.backgroundColor= "mediumseagreen";
          break;
        }
      }
      incorrect++;
    }
    n++;
    setTimeout(function(){ google.script.run.withSuccessHandler(populateQuestion).getData(document.getElementById("unit").value); }, 1000);   

  };

  function nextQuestionB(data){
  var answer = data[n][5];

  var answered = document.getElementById("btn1").innerHTML;
    if(answer==answered){
      document.getElementById("btn1").style.backgroundColor= "mediumseagreen";
      correct++;
    }
    else{
      document.getElementById("btn1").style.backgroundColor= "tomato";
      for(i=1;i<5;i++){
        if(data[n][i]==answer){
          document.getElementById("btn"+(i-1)).style.backgroundColor= "mediumseagreen";
          break;
        }
      }
      incorrect++;
    }
    n++;

    setTimeout(function(){ google.script.run.withSuccessHandler(populateQuestion).getData(document.getElementById("unit").value); }, 1000);  

  };

  function nextQuestionC(data){
  var answer = data[n][5];
  var answered = document.getElementById("btn2").innerHTML;
    if(answer==answered){
      document.getElementById("btn2").style.backgroundColor= "mediumseagreen";
      correct++;
    }
    else{
      document.getElementById("btn2").style.backgroundColor= "tomato";
      for(i=1;i<5;i++){
        if(data[n][i]==answer){
          document.getElementById("btn"+(i-1)).style.backgroundColor= "mediumseagreen";
          break;
        }
      }
      incorrect++;
    }
    n++;
    setTimeout(function(){ google.script.run.withSuccessHandler(populateQuestion).getData(document.getElementById("unit").value); }, 1000);   
  };

  function nextQuestionD(data){
  var answer = data[n][5];
  var answered = document.getElementById("btn3").innerHTML;
    if(answer==answered){
      document.getElementById("btn3").style.backgroundColor= "mediumseagreen";
      correct++;
    }
    else{
      document.getElementById("btn3").style.backgroundColor= "tomato";
      for(i=1;i<5;i++){
        if(data[n][i]==answer){
          document.getElementById("btn"+(i-1)).style.backgroundColor= "mediumseagreen";
          break;
        }
      }
      incorrect++;
    }
    n++;
    setTimeout(function(){ google.script.run.withSuccessHandler(populateQuestion).getData(document.getElementById("unit").value); }, 1000);   
  };
 //initialization
 google.script.run.withSuccessHandler(populateQuestion).getData(document.getElementById("unit").value);


</script>
</body>
</html>

0 个答案:

没有答案