interface Web
js tutoriel
Exemple montrant comment JS implémente un système simple d'évaluation à choix multiples
Exemple montrant comment JS implémente un système simple d'évaluation à choix multiples
Cet article partagera avec vous l'exemple de code d'un système d'évaluation à choix multiples simple implémenté en js. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer
Y compris le contenu : Formulaire d'encapsulation JS, formulaire de vérification JS
On dit que c'est un système d'évaluation, mais on a l'impression qu'il ne peut être considéré que comme une petite démo. Il est très aqueux et n'a pas de base de données. créer un système d'évaluation simple à choix multiples
----- ------------------------------- ------------------- ----------------
1. Idées de conception
Emballage du formulaire :
[1] Puisqu'il est soumis à l'aide d'un emballage JS, il n'y a pas besoin de balises de formulaire.
[2] Placez plusieurs balises d'entrée comme éléments d'entrée
【3】Écrivez du JS pour obtenir les éléments d'entrée et soumettez-les à une autre page via la méthode get
Formulaire de vérification (affichage résultats)
【1】Récupérer les paramètres transmis par get
【2】Analyser via JS
【3】Afficher à la position correspondante
----------------------- --------------------------- ----------------------- -------
2. Le code source de référence est le suivant. suit
request.html
<html>
<head>
<title>考试系统</title>
<meta http-equiv="accept-charset" charset="utf-8">
<script src="jquery.min.js"></script>
<script type="text/javascript">
function getjson() {
var radio = new Array();
for (var i = 1; i <= 5; i++) {//获取radio的值
var radio_name = new String("radio_" + i);
radio[i - 1] = $('input:radio[name=' + radio_name + ']:checked').val()
}
for (var i = 1; i <= 2; i++) {//获取checkbox的的输入
var checkbox_name = new String("checkbox_" + i);
var chk_value = [];
$('input:checkbox[name=' + checkbox_name + ']:checked').each(function () {
chk_value.push($(this).val());
});
radio[i + 4] = "";//置为空
for (var j = 0; j < chk_value.length; j++) {
radio[i + 4] = radio[i + 4] + chk_value[j];
}
}
//数组转json串
var json = JSON.stringify(radio);
return json;
}
function my_confirm() {
var json = getjson();
var msg = "您真的答案是：" + json + ",是否确认提交";
if (confirm(msg) == true) {
window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + json;
} else {
return false;
}
}
$(function () {
var m = 1;
var s = 10;
setInterval(function () {
if (m >= 0) {
if (s < 10) {
$('#time').html("剩余时间：" + m + ':0' + s);
} else {
$('#time').html("剩余时间：" + m + ':' + s);
}
s--;
if (s < 0) {
s = 59;
m--;
}
if (m == 0 && s < 1) {
window.location.href = "result.html?radio=" + 5 + "checkbox=" + 2 + "&json=" + getjson();
}
}
}, 1000)
})
</script>
</head>
<body>
<h3 id="学年期末测试题">2016--2017学年期末测试题</h3>
<p id="time" style="color:red;float: right;margin: 12px 20px 0 0;padding: 0 0 0 0;font-size: xx-large"></p>
<br/><br/><br/>
<hr/>
<h4 id="一-单选题-每题-分-满分-分">一、单选题（每题12分，满分60分）</h4>
1.当方法遇到异常又不知如何处理时，下列（） 做法是正确的。<br>
<input type="radio" name="radio_1" value="A">A、捕获异常<br>
<input type="radio" name="radio_1" value="B">B、抛出异常<br>
<input type="radio" name="radio_1" value="C">C、声明异常<br>
<input type="radio" name="radio_1" value="D">D、嵌套异常<br>
2.下列说法错误的是() <br>
<input type="radio" name="radio_2" value="A">A、在java中一个类被声明为final类型，表示该类不能被继承。<br>
<input type="radio" name="radio_2" value="B">B、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递。<br>
<input type="radio" name="radio_2" value="C">C、一个类不能既被声明为 abstract，又被声明为final。<br>
<input type="radio" name="radio_2" value="D">D、方法的覆盖(Overriding)和重载(Overloading)是Java多态性的表现，他们没有区别。<br>
3.下列创建数组的方法哪个是错误的? <br>
<input type="radio" name="radio_3" value="A">A、Date[] arr = new Date[5];<br>
<input type="radio" name="radio_3" value="B">B、Date arr[] = new Date[];<br>
<input type="radio" name="radio_3" value="C">C、Date arr[][] = new Date[4][5];<br>
<input type="radio" name="radio_3" value="D">D、Date arr[][] = new Date[4][];<br>
4.在读文件Employee.txt 时，可以直接使用该文件作为参数的类是() <br>
<input type="radio" name="radio_4" value="A">A、BufferedReader<br>
<input type="radio" name="radio_4" value="B">B、FileInputStream<br>
<input type="radio" name="radio_4" value="C">C、DataOutputStream<br>
<input type="radio" name="radio_4" value="D">D、DataInputStream<br>
5.下列关于线程的说法中，错误的是？ <br>
<input type="radio" name="radio_5" value="A">A、线程必须通过方法start() 来启动。<br>
<input type="radio" name="radio_5" value="B">B、线程创建后，其优先级是可以改变的。<br>
<input type="radio" name="radio_5" value="C">C、实现Runnable接口或者从Thread类派生的线程类没有区别。<br>
<input type="radio" name="radio_5" value="D">D、当对象用synchronized 修饰时，表明该对象在任一时刻只能由一个线程访问。<br>
<br/>
<h4 id="二-多选题-每题-分-满分-分-错选-少选-多选不得分">二、多选题（每题20分，满分40分，错选、少选、多选不得分）</h4>
6.下列说法正确的是() <br>
<input type="checkbox" name="checkbox_1" value="A">A、在java中一个类被声明为final类型，表示该类不能被继承。<br>
<input type="checkbox" name="checkbox_1" value="B">B、当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，这叫引用传递。<br>
<input type="checkbox" name="checkbox_1" value="C">C、一个类不能既被声明为 abstract，又被声明为final。<br>
<input type="checkbox" name="checkbox_1" value="D">D、方法的覆盖(Overriding)和重载(Overloading)是Java多态性的表现，他们没有区别。<br>
7.当方法遇到异常又不知如何处理时，下列（） 做法是不正确的。<br>
<input type="checkbox" name="checkbox_2" value="A">A、捕获异常<br>
<input type="checkbox" name="checkbox_2" value="B">B、抛出异常<br>
<input type="checkbox" name="checkbox_2" value="C">C、声明异常<br>
<input type="checkbox" name="checkbox_2" value="D">D、嵌套异常<br>
<hr/>
<input type="button" onclick="my_confirm()" value="考试完成">
</body>
</html>-- ----------------------- -------------------------------- ----------------------- -----
result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考试结果</title>
<script src="jquery.min.js"></script>
<script>
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
function showResult() {
var answer = ["B", "D", "B", "B", "D", "ABC", "ACD"];//标准答案
var answer_score = [12, 12, 12, 12, 12, 20, 20];//答案的分数
var user_answer = JSON.parse(getUrlParam("json"));//获取用户答案
var radio_num = parseInt(getUrlParam("radio"));//获取单选个数
var checkbox_num = parseInt(getUrlParam("checkbox"));//获取多选个数
var radio_result = 0;//单选分数
var checkbox_result = 0;//多选分数
var radio_right_num = 0;//单选答对个数
var checkbox_right_num = 0;//多选答对个数
var result = 0;//总分数
var user_answer_result = new Array();//用户没到题的答题情况
for (var i = 0; i < user_answer.length; i++) {
if (user_answer[i] == answer[i]) {
if (i < radio_num) {
radio_result = radio_result + answer_score[i];
radio_right_num++;
} else {
checkbox_result = checkbox_result + answer_score[i];
checkbox_right_num++;
}
user_answer_result[i] = "正确";
} else {
user_answer_result[i] = "错误";
}
}
result = checkbox_result + radio_result;
//结果展示
var show_result1;
var show_result2;
var show_result3;
var show_result4;
var show_result5;
var show_result6;
show_result1 = "你的答案结果为：";
for (var i = 0; i < user_answer.length; i++) {
show_result1 = show_result1 + (i + 1) + "：" + user_answer_result[i] + "； ";
}
show_result2 = "总题目个数：" + user_answer.length;
show_result3 = "答对单选题题目个数：" + radio_right_num + "； 得分：" + radio_result;
show_result4 = "答对多选题题目个数：" + checkbox_right_num + "； 得分：" + checkbox_result;
show_result5 = "答错题目个数：" + (user_answer.length - radio_right_num - checkbox_right_num);
show_result6 = " 本次考试总成绩为：" + result;
$("p#show_result1").html(show_result1);
$("p#show_result2").html(show_result2);
$("p#show_result3").html(show_result3);
$("p#show_result4").html(show_result4);
$("p#show_result5").html(show_result5);
$("p#show_result6").html(show_result6);
}
</script>
</head>
<body>
<h2 id="考试结束">考试结束！</h2>
<hr/>
<input type="button" onclick="showResult()" value="查看结果">
<p id="show_result1">
<p>
<hr/>
<p id="show_result2"></p>
<p id="show_result3"></p>
<p id="show_result4"></p>
<p id="show_result5"></p>
<hr/>
<p id="show_result6"></p>
</body>
</html>Le résultat est le suivant :
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Le moyen le plus simple d'interroger le numéro de série du disque dur
Feb 26, 2024 pm 02:24 PM
Le numéro de série du disque dur est un identifiant important du disque dur et est généralement utilisé pour identifier de manière unique le disque dur et identifier le matériel. Dans certains cas, nous pouvons avoir besoin d'interroger le numéro de série du disque dur, par exemple lors de l'installation d'un système d'exploitation, de la recherche du pilote de périphérique approprié ou de la réparation du disque dur. Cet article présentera quelques méthodes simples pour vous aider à vérifier le numéro de série du disque dur. Méthode 1 : utilisez l’invite de commande Windows pour ouvrir l’invite de commande. Dans le système Windows, appuyez sur les touches Win+R, entrez « cmd » et appuyez sur la touche Entrée pour ouvrir la commande
Comment définir le fond d'écran de verrouillage sur le moteur de fond d'écran ? Comment utiliser le moteur de fond d'écran
Mar 13, 2024 pm 08:07 PM
WallpaperEngine est un logiciel couramment utilisé pour définir des fonds d'écran. Les utilisateurs peuvent rechercher leurs images préférées dans WallpaperEngine pour générer des fonds d'écran. Il prend également en charge l'ajout d'images depuis l'ordinateur vers WallpaperEngine pour les définir comme fonds d'écran. Jetons un coup d'œil à la manière dont WallpaperEngine définit le fond d'écran de l'écran de verrouillage. Tutoriel de fond d'écran de configuration de l'écran de verrouillage de Wallpaperengine 1. Entrez d'abord le logiciel, puis sélectionnez installé et cliquez sur « Configurer les options de papier peint ». 2. Après avoir sélectionné le fond d'écran dans des paramètres séparés, vous devez cliquer sur OK en bas à droite. 3. Cliquez ensuite sur les paramètres et l'aperçu ci-dessus. 4. Suivant
Le moteur de papier peint peut-il être partagé entre les familles ?
Mar 18, 2024 pm 07:28 PM
Wallpaper prend-il en charge le partage familial ? Malheureusement, il ne peut pas être pris en charge ? Pourtant, nous avons des solutions. Par exemple, vous pouvez acheter avec un petit compte ou télécharger d'abord le logiciel et les fonds d'écran à partir d'un grand compte, puis passer au petit compte. Il suffit de lancer le logiciel. Wallpaperengine peut-il être partagé en famille ? Réponse : Wallpaper ne prend actuellement pas en charge la fonction de partage familial. 1. Il est entendu que WallpaperEngine ne semble pas adapté aux environnements de partage familial. 2. Afin de résoudre ce problème, il est recommandé d'envisager d'acheter un nouveau compte ; 3. Ou de télécharger d'abord les logiciels et les fonds d'écran requis dans le compte principal, puis de passer à d'autres comptes. 4. Ouvrez simplement le logiciel avec un léger clic et tout ira bien. 5. Vous pouvez consulter les propriétés sur la page Web ci-dessus"
iBatis vs MyBatis : lequel vous convient le mieux ?
Feb 19, 2024 pm 04:38 PM
iBatis vs MyBatis : lequel choisir ? Introduction : Avec le développement rapide du langage Java, de nombreux frameworks de persistance ont vu le jour. iBatis et MyBatis sont deux frameworks de persistance populaires, qui fournissent tous deux une solution d'accès aux données simple et efficace. Cet article présentera les fonctionnalités et les avantages d'iBatis et MyBatis, et donnera quelques exemples de code spécifiques pour vous aider à choisir le framework approprié. Introduction à iBatis : iBatis est un framework de persistance open source
Dans quel dossier se trouvent les fonds d'écran du moteur de papier peint ?
Mar 19, 2024 am 08:16 AM
Lorsqu'ils utilisent un fond d'écran, les utilisateurs peuvent télécharger divers fonds d'écran qu'ils souhaitent utiliser. De nombreux utilisateurs ne savent pas dans quel dossier se trouvent les fonds d'écran. Les fonds d'écran téléchargés par les utilisateurs sont stockés dans le dossier de contenu. Dans quel dossier se trouve le fond d’écran ? Réponse : dossier de contenu. 1. Ouvrez l'Explorateur de fichiers. 2. Cliquez sur « Ce PC » à gauche. 3. Recherchez le dossier "STEAM". 4. Sélectionnez "steamapps". 5. Cliquez sur « atelier ». 6. Recherchez le dossier « contenu ».
Y a-t-il un virus lorsque l'on regarde des films avec un moteur de fond d'écran ?
Mar 18, 2024 pm 07:28 PM
Les utilisateurs peuvent télécharger divers fonds d'écran lorsqu'ils utilisent WallpaperEngine et peuvent également utiliser des fonds d'écran dynamiques. De nombreux utilisateurs ne savent pas s'il existe des virus lorsqu'ils regardent des vidéos sur WallpaperEngine, mais les fichiers vidéo ne peuvent pas être utilisés comme virus. Y a-t-il un virus lorsque vous regardez des films sur WallpaperEngine ? Réponse : Non. 1. Seuls les fichiers vidéo ne peuvent pas être utilisés comme virus. 2. Assurez-vous simplement de télécharger des vidéos à partir de sources fiables et de maintenir des mesures de sécurité informatique pour éviter tout risque d'infection virale. 3. Les fonds d'écran des applications sont au format apk et apk peut contenir des virus chevaux de Troie. 4. WallpaperEngine lui-même ne contient pas de virus, mais certains fonds d'écran d'application de l'atelier de création peuvent contenir des virus.
Comment modifier la taille de la police dans le navigateur Microsoft Edge - Comment modifier la taille de la police dans le navigateur Microsoft Edge
Mar 04, 2024 pm 05:58 PM
Je suppose que vous n'êtes pas familier avec le navigateur Microsoft Edge, mais savez-vous comment modifier la taille de la police dans le navigateur Microsoft Edge ? L'article suivant décrit comment modifier la taille de la police dans le navigateur Microsoft Edge. Tout d’abord, recherchez le navigateur Microsoft Edge et double-cliquez dessus pour l’ouvrir. Vous pouvez trouver le navigateur Microsoft Edge dans le raccourci du bureau, le menu Démarrer ou la barre des tâches, et double-cliquer pour l'ouvrir. Deuxièmement, ouvrez l'interface [Paramètres] pour accéder à cette interface de navigateur, cliquez sur le logo [...] dans le coin supérieur gauche ; double-cliquez sur [Paramètres] pour ouvrir l'interface des paramètres. Encore une fois, recherchez et ouvrez l'interface [Apparence] et faites défiler vers le bas avec la souris.
Le moteur de papier peint consomme-t-il beaucoup d'énergie ?
Mar 18, 2024 pm 08:30 PM
Les utilisateurs peuvent modifier les fonds d'écran de leur ordinateur lorsqu'ils utilisent WallpaperEngine. De nombreux utilisateurs ne savent pas que WallpaperEngine consomme beaucoup d'énergie. Les fonds d'écran dynamiques consomment un peu plus d'énergie que les fonds d'écran statiques, mais pas beaucoup. Le moteur de papier peint consomme-t-il beaucoup d’énergie ? Réponse : Pas beaucoup. 1. Les fonds d’écran dynamiques consomment un peu plus d’énergie que les fonds d’écran statiques, mais pas beaucoup. 2. L'activation du fond d'écran dynamique augmentera la consommation d'énergie de l'ordinateur et supprimera une petite quantité d'utilisation de la mémoire. 3. Les utilisateurs n'ont pas à s'inquiéter de la consommation d'énergie importante des fonds d'écran dynamiques.
