Développer une application de questionnaire Web en utilisant JavaScript-js tutoriel-php.cn

Développer une application de questionnaire Web en utilisant JavaScript

王林

Libérer： 2023-08-09 10:01:10

original

1317 Les gens l'ont consulté

Développer une application de questionnaire Web en utilisant JavaScript

Utilisez JavaScript pour développer une application de questionnaire Web

Introduction :
Avec le développement d'Internet, les questionnaires Web sont devenus une méthode courante de collecte de données. Dans les enquêtes par questionnaire Web, l'utilisation de JavaScript pour le développement peut réaliser diverses fonctions, telles que l'ajout dynamique de questions, la vérification des entrées et l'affichage des résultats statistiques en temps réel. Cet article présentera les étapes de base du développement d'une application de questionnaire Web à l'aide de JavaScript et joindra des exemples de code.

1. Mise en page et structure de base
Avant de commencer le développement, vous devez d'abord concevoir la mise en page et la structure de base de la page Web. De manière générale, les applications d'enquête en ligne se composent d'une partie question et d'une partie réponse. La section des questions contient une description de la question et des zones de saisie ou de sélection, tandis que la section des réponses est utilisée pour afficher les résultats statistiques. Voici un exemple simple de mise en page :

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

Copier après la connexion

2. Ajouter des questions de manière dynamique
En JavaScript, les questions peuvent être ajoutées dynamiquement via les opérations DOM. Tout d’abord, vous devez définir un objet problème contenant la description et le type du problème. Ensuite, une fois le chargement de la page terminé, utilisez le code JavaScript pour ajouter l'élément de question au nœud <div id="questions">. Voici un exemple de code pour ajouter des questions à choix unique et à choix multiples :

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

Copier après la connexion

3. Soumettre les données et les résultats statistiques
Lorsque l'utilisateur clique sur le bouton Soumettre, le code JavaScript peut être utilisé pour obtenir les réponses saisies par l'utilisateur et traitez-les en conséquence. Voici un exemple de code simple pour soumettre des données et des résultats statistiques :

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

Copier après la connexion

Conclusion
Grâce aux exemples de code ci-dessus, nous pouvons voir que JavaScript est un langage puissant qui joue un rôle important dans le développement d'applications de questionnaires Web. JavaScript peut être utilisé pour ajouter dynamiquement des questions, vérifier les entrées de l'utilisateur et afficher les résultats statistiques en temps réel. J'espère que cet article vous aidera à développer une application de questionnaire web !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!