JavaScriptを使用したWebアンケートアプリの開発-jsチュートリアル-php.cn

JavaScriptを使用したWebアンケートアプリの開発

王林

リリース： 2023-08-09 10:01:10

オリジナル

1301 人が閲覧しました

JavaScriptを使用したWebアンケートアプリの開発

JavaScript を使用した Web アンケート調査アプリケーションの開発

はじめに:
インターネットの発展に伴い、Web アンケート調査はデータ収集方法として一般的に使用されるようになりました。。 Webアンケート調査では、JavaScriptを使用して開発することで、動的に質問を追加したり、入力内容を検証したり、統計結果をリアルタイムに表示したりするなど、さまざまな機能を実現できます。この記事では、JavaScriptを使用したWebアンケートアプリ開発の基本手順とコード例を紹介します。

1. ページのレイアウトと基本構造
開発を始める前に、まず Web ページのレイアウトと基本構造を設計する必要があります。一般的に、Web アンケートアプリケーションは質問部分と回答部分で構成されます。質問セクションには質問の説明と入力ボックスまたは選択ボックスが含まれ、回答セクションは統計結果を表示するために使用されます。以下は簡単なページレイアウトの例です。

<!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>

ログイン後にコピー

2. 質問を動的に追加します
JavaScript では、DOM 操作を通じて質問を動的に追加できます。まず、問題の説明と種類を含む問題オブジェクトを定義する必要があります。次に、ページが読み込まれた後、JavaScript コードを使用して、質問要素を <div id="questions"> ノードに追加します。以下は、単一選択および複数選択の質問を追加するためのサンプルコードです:

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);
  });
};

ログイン後にコピー

3. データと統計結果を送信
ユーザーが送信ボタンをクリックすると、JavaScript コードを使用してデータを取得できます。ユーザーが入力した回答を入力し、対応する処理を実行します。以下は、データと統計結果を送信するための簡単なサンプルコードです。

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);
}

ログイン後にコピー

結論
上記のコード例を通じて、JavaScript が Web アンケートアプリケーションの開発にとって重要な役割を果たしている強力な言語であることがわかります。役割。 JavaScript を使用すると、質問を動的に追加し、ユーザー入力を検証し、統計結果をリアルタイムで表示できます。この記事がWebアンケートアプリ開発の一助になれば幸いです！

以上がJavaScriptを使用したWebアンケートアプリの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。