Googlesheet Apps script Webapp | Tạo trang trắc nghiệm online như Quiz

05/11/2024 giaoanppt

Giaoan.link chia sẻ đến các bạn một project về Googlesheet Apps script Webapp | Tạo trang trắc nghiệm online như Quiz. Với project này, bạn có thể xây dựng các câu hỏi trắc nghiệm các câu hỏi. Với giao diện chọn theo trường khá đẹp mắt. Khi hoàn tất, bạn có sự thông báo kết quả bao nhiêu câu đúng. Dưới đây là video hướng dẫn và code của project này.

||Tìm thêm các project khác tại đây

Các project xuất hiện ngẫu nhiên:

Code apps script trên trang “Code.gs”

function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Mã apps script trên trang “index.html”

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('css'); ?>
  </head>
  <body>
    <div class="app">
      <h1>Trắc Nghiệm Lịch Sử Việt Nam</h1>
      <div class="quiz">
        <h2 id="question">Question goes here</h2>
        <div id="answer-buttons">
          <button class="btn"> Answer 1</button>
          <button class="btn"> Answer 2</button>
          <button class="btn"> Answer 3</button>          
        </div>
        <button id="next-btn">Next</button>
      </div>
    </div>

    <?!= include('Javascript'); ?>
  </body>
</html>

Mã apps script trên trang “css.html”

<style>
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

body{
  background: #2fc0fc;

}

.app{
  background: #fff;
  width: 90%;
  max-width: 600px;
  margin: 100px auto 0;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.app h1{
  font-weight: 25px;
  color: red;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid blue; 
  padding-bottom: 30px;
}

.quiz {
  padding: 20px 0;
}

.quiz h2{
  font-size: 18px;
  color: #001e4d;
  font-wieght: 600;
}

.btn{
  background: #fff;
  color: #222;
  font-weight: 500;
  width: 100%;
  border: 1px solid #222;
  padding: 10px;
  margin: 10px 0;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover:not([disabled]){
  background: #222;
  color: #fff;
}
.btn:disabled{
  cursor: no-drop;
}

#next-btn{
  background: #001e4d;
  color: #fff;
  font-weight: 500;
  width: 150px;
  border: 0;
  padding: 10px;
  margin: 20px auto 0;
  border-radius: 5px;
  cursor: pointer;
  display: block;
}

.correct{
  background: #9aeabc;
}
.incorrect{
  background: #ff9393;
}
</style>

Mã apps script trên “Javascript.html”

<script>
const questions=[
  {
    question: "Nhà nước đầu tiên của nước ta là gì?",
    answers:[
      {text: "Văn lang", correct: true},
      {text: "Âu lạc", correct: false},
      {text: "Việt Nam", correct: false},     
    ]
  },

  {
    question: "Vị vua đầu tiên của nước ta là ai?",
    answers:[
      {text: "An Dương Vương", correct: false},
      {text: "Vua Hùng Vương", correct: true},
      {text: "Bảo Đại", correct: false},
    ]
  },

  {
    question: "Thành tựu đặc sắc về phong trào của người dân Âu Lạc là gì?",
    answers:[
      {text: "Chế tạo loại nỏ bắn một lần được nhiều mũi tên", correct: false},
      {text: "Xây dựng thành Cổ Loa", correct: false},
      {text: "Cả hai đều đúng", correct: true},      
    ]
  },
  {
    question: 'Câu "Triệu Đà đã hoãn binh, cho con trai làm rể An Dương Vương" gợi cho ta nhớ đến câu chuyện nào?',
    answers:[
      {text: "Mị Châu- Trọng thủy", correct: true},
      {text: "Sơn tinh- Thủy Tinh", correct: false},
      {text: "Thạch Sanh", correct: false},    
    ]
  },
  {
    question: "Chiến thắng vang dội nhất của nhân dân ta trước các triều đại phương Bắc là:",
    answers:[
      {text: "Chiến thắng của Hai Bà Trưng", correct: false},
      {text: "Chiến thắng Bạch Đằng", correct: true},
      {text: "Chiến thắng Lí Bí", correct: false},    
    ]
  }
];

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");

let currentQuestionIndex = 0;
let score = 0;

function startQuiz(){
  currentQuestionIndex = 0;
  score = 0;
  nextButton.innerHTML = "Câu tiếp theo";
  showQuestion();
}

function showQuestion(){
  resetState();
  let currentQuestion = questions[currentQuestionIndex];
  let questionNo = currentQuestionIndex + 1;
  questionElement.innerHTML = questionNo + ". " + currentQuestion.question;

  currentQuestion.answers.forEach(answer => {
    const button = document.createElement("button");
    button.innerHTML = answer.text;
    button.classList.add("btn");
    answerButtons.appendChild(button);
    if(answer.correct){
      button.dataset.correct = answer.correct;
    }
    button.addEventListener("click", selectAnswer);
  });
}

function resetState(){
  nextButton.style.display = "none";
  while(answerButtons.firstChild){
     answerButtons.removeChild(answerButtons.firstChild);
  }
}

function selectAnswer(e){
  const selectedBtn = e.target;
  const isCorrect = selectedBtn.dataset.correct === "true";
  if(isCorrect){
    selectedBtn.classList.add("correct");
    score++;
  }else{
    selectedBtn.classList.add("incorrect");
  }
  Array.from(answerButtons.children).forEach(button => {
    if(button.dataset.correct === "true"){
      button.classList.add("correct");
    }
    button.disabled = true;
  });
  nextButton.style.display = "block";
}


function showScore(){
  resetState();
  questionElement.innerHTML = `Bạn trả lời đúng ${score} / ${questions.length} câu hỏi!`;
  nextButton.innerHTML = "Làm lại";
  nextButton.style.display = "block"
  }

function handleNextButton(){
  currentQuestionIndex++;
  if(currentQuestionIndex < questions.length){
    showQuestion();
  }else{
    showScore();
  }
}

nextButton.addEventListener("click", ()=> {
  if(currentQuestionIndex < questions.length){
    handleNextButton();
  }else{
    startQuiz();
  }
});

startQuiz();

</script>