Membangunkan aplikasi soal selidik web menggunakan JavaScript-tutorial js-php.cn

Membangunkan aplikasi soal selidik web menggunakan JavaScript

王林

Lepaskan： 2023-08-09 10:01:10

asal

1279 orang telah melayarinya

Membangunkan aplikasi soal selidik web menggunakan JavaScript

Gunakan JavaScript untuk membangunkan aplikasi soal selidik web

Pengenalan:
Dengan perkembangan Internet, soal selidik web telah menjadi kaedah pengumpulan data yang biasa. Dalam tinjauan soal selidik web, menggunakan JavaScript untuk pembangunan boleh merealisasikan pelbagai fungsi, seperti menambah soalan secara dinamik, mengesahkan input dan memaparkan keputusan statistik dalam masa nyata. Artikel ini akan memperkenalkan langkah asas membangunkan aplikasi soal selidik web menggunakan JavaScript, dan melampirkan contoh kod.

1. Susun atur halaman dan struktur asas
Sebelum memulakan pembangunan, anda perlu mereka bentuk susun atur dan struktur asas halaman web terlebih dahulu. Secara umumnya, aplikasi tinjauan web terdiri daripada bahagian soalan dan bahagian jawapan. Bahagian soalan mengandungi penerangan tentang soalan dan kotak input atau pilihan, manakala bahagian jawapan digunakan untuk memaparkan keputusan statistik. Berikut ialah contoh reka letak halaman yang mudah:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页问卷调查应用</title>
  </head>
  <body>
    <h1>网页问卷调查应用</h1>

    <div id="questions">
      <!-- 问题部分 -->
    </div>

    <button type="button" onclick="submit()">提交</button>

    <div id="statistics">
      <!-- 统计结果部分 -->
    </div>

    <script src="survey.js"></script>
  </body>
</html>

Salin selepas log masuk

2. Tambahkan soalan secara dinamik
Dalam JavaScript, soalan boleh ditambah secara dinamik melalui operasi DOM. Pertama, anda perlu menentukan objek masalah yang mengandungi penerangan dan jenis masalah. Kemudian, selepas halaman selesai dimuatkan, gunakan kod JavaScript untuk menambahkan elemen soalan pada nod <div id="questions">. Berikut ialah contoh kod untuk menambah soalan pilihan tunggal dan berbilang pilihan:

var questions = [
  { description: "你的性别是？", type: "radio", options: ["男", "女"] },
  { description: "你喜欢的水果是？", type: "checkbox", options: ["苹果", "香蕉", "橙子", "草莓"] }
];

window.onload = function() {
  var questionsWrapper = document.getElementById("questions");

  questions.forEach(function(question) {
    var questionElement = document.createElement("div");
    questionElement.innerHTML = question.description;

    if (question.type === "radio") {
      question.options.forEach(function(option) {
        var optionElement = document.createElement("input");
        optionElement.setAttribute("type", "radio");
        optionElement.setAttribute("name", question.description);
        optionElement.setAttribute("value", option);
        questionElement.appendChild(optionElement);

        var labelElement = document.createElement("label");
        labelElement.innerHTML = option;
        questionElement.appendChild(labelElement);
      });
    } else if (question.type === "checkbox") {
      question.options.forEach(function(option) {
        var optionElement = document.createElement("input");
        optionElement.setAttribute("type", "checkbox");
        optionElement.setAttribute("name", question.description);
        optionElement.setAttribute("value", option);
        questionElement.appendChild(optionElement);

        var labelElement = document.createElement("label");
        labelElement.innerHTML = option;
        questionElement.appendChild(labelElement);
      });
    }

    questionsWrapper.appendChild(questionElement);
  });
};

Salin selepas log masuk

3 Serahkan data dan keputusan statistik
Apabila pengguna mengklik butang hantar, kod JavaScript boleh digunakan untuk mendapatkan jawapan yang dimasukkan oleh pengguna dan. memprosesnya dengan sewajarnya. Berikut ialah contoh kod mudah untuk menghantar data dan keputusan statistik:

function submit() {
  var questionsWrapper = document.getElementById("questions");
  var questions = questionsWrapper.children;

  var answers = {};

  for (var i = 0; i < questions.length; i++) {
    var question = questions[i];

    if (question.tagName === "DIV") {
      var description = question.innerHTML;
      var options = question.getElementsByTagName("input");

      answers[description] = [];

      for (var j = 0; j < options.length; j++) {
        var option = options[j];

        if (option.checked) {
          answers[description].push(option.value);
        }
      }
    }
  }

  var statisticsWrapper = document.getElementById("statistics");
  statisticsWrapper.innerHTML = JSON.stringify(answers, null, 2);
}

Salin selepas log masuk

Kesimpulan
Melalui contoh kod di atas, kita dapat melihat bahawa JavaScript ialah bahasa berkuasa yang memainkan peranan penting dalam pembangunan aplikasi soal selidik web. JavaScript boleh digunakan untuk menambah soalan secara dinamik, mengesahkan input pengguna dan memaparkan keputusan statistik dalam masa nyata. Saya harap artikel ini akan membantu anda membangunkan aplikasi soal selidik web!

Atas ialah kandungan terperinci Membangunkan aplikasi soal selidik web menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!