Home >Web Front-end >JS Tutorial >Develop web questionnaire application using JavaScript
Develop web questionnaire application using JavaScript
- 王林Original
- 2023-08-09 10:01:101300browse
Using JavaScript to develop web questionnaire survey applications
Introduction:
With the development of the Internet, web questionnaire surveys have become a commonly used method of data collection. In web questionnaire surveys, using JavaScript for development can realize various functions, such as dynamically adding questions, verifying input, and displaying statistical results in real time. This article will introduce the basic steps of developing a web questionnaire application using JavaScript, and attach code examples.
1. Page layout and basic structure
Before starting development, you first need to design the layout and basic structure of the web page. Generally speaking, web survey applications consist of a question part and an answer part. The question section contains a description of the question and input or selection boxes, while the answer section is used to display statistical results. The following is a simple page layout example:
<!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. Add questions dynamically
In JavaScript, questions can be added dynamically through DOM operations. First, you need to define a problem object that contains the description and type of the problem. Then, after the page loads, use JavaScript code to add a question element to the <div id="questions"> node. The following is a sample code for adding single-choice and multiple-choice questions: <pre class='brush:javascript;toolbar:false;'>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);
});
};</pre><p>3. Submit data and statistical results<br>When the user clicks the submit button, JavaScript code can be used to obtain the answer entered by the user, and Carry out corresponding processing. The following is a simple sample code for submitting data and statistical results: </p><pre class='brush:javascript;toolbar:false;'>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);
}</pre><p>Conclusion<br>Through the above code examples, we can see that JavaScript is a powerful language for the development of web questionnaire applications played an important role. JavaScript can be used to dynamically add questions, verify user input, and display statistical results in real time. I hope this article will help you develop a web questionnaire application! </p>
</div>
The above is the detailed content of Develop web questionnaire application using JavaScript. For more information, please follow other related articles on the PHP Chinese website!