Maison > développement back-end > tutoriel php > Comment implémenter la fonction de questions à choix multiples dans les réponses aux questions en ligne

Comment implémenter la fonction de questions à choix multiples dans les réponses aux questions en ligne

王林
Libérer: 2023-09-24 15:32:01
original
1111 Les gens l'ont consulté

Comment implémenter la fonction de questions à choix multiples dans les réponses aux questions en ligne

Comment implémenter la fonction de questions à choix multiples dans la réponse en ligne nécessite des exemples de code spécifiques

Dans l'éducation moderne, la réponse en ligne est devenue une méthode d'apprentissage courante. Les questions à choix multiples, en tant qu'un des types de questions, constituent un moyen efficace d'évaluer la maîtrise des connaissances des élèves. Dans cet article, nous présenterons comment implémenter la fonction de questions à choix multiples dans la réponse en ligne via le code.

Tout d'abord, nous devons créer une interface Web permettant aux étudiants de répondre aux questions. Voici un exemple simple de code HTML :

<!DOCTYPE html>
<html>
<head>
    <title>多选题示例</title>
</head>
<body>
    <h1>多选题示例</h1>
    <form id="quizForm">
        <h2>题目1:以下哪些是水果?</h2>
        <label><input type="checkbox" name="question1" value="A">苹果</label><br>
        <label><input type="checkbox" name="question1" value="B">青菜</label><br>
        <label><input type="checkbox" name="question1" value="C">香蕉</label><br>
        <label><input type="checkbox" name="question1" value="D">西瓜</label><br>
        <button type="button" onclick="checkAnswer()">提交答案</button>
    </form>

    <script>
        function checkAnswer() {
            var correctAnswer = ["A", "C", "D"]; // 正确答案
            var userAnswer = [];

            var checkboxes = document.getElementsByName("question1");
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    userAnswer.push(checkboxes[i].value);
                }
            }

            // 比较用户答案与正确答案
            var isCorrect = userAnswer.length === correctAnswer.length && userAnswer.every((value, index) => value === correctAnswer[index]);

            if (isCorrect) {
                alert("答案正确!");
            } else {
                alert("答案错误!");
            }
            // 可以在这里进行其他操作,如计算得分等
        }
    </script>
</body>
</html>
Copier après la connexion

Le code ci-dessus crée une interface Web simple qui contient une question à choix multiples dans laquelle l'utilisateur doit choisir la bonne réponse parmi quatre options. Une fois que l'utilisateur a cliqué sur le bouton Soumettre la réponse, le programme obtiendra la réponse de l'utilisateur et la comparera avec la bonne réponse prédéfinie. Si la réponse est correcte, le message d'invite « La réponse est correcte ! » s'affiche, sinon « La réponse est fausse ! » s'affiche.

Dans le code JavaScript, nous utilisons document.getElementsByName方法获取到所有以question1为名的复选框元素,然后通过遍历判断哪些复选框被选中。将用户的答案存入userAnswer数组。然后,我们通过比较userAnswercorrectAnswerla longueur des deux tableaux et si chaque élément qu'ils contiennent est égal pour déterminer si la réponse de l'utilisateur est correcte.

De plus, vous pouvez ajouter d'autres opérations dans le code, comme le calcul des scores, l'affichage des bonnes réponses, etc.

En résumé, grâce aux exemples de code ci-dessus, nous pouvons implémenter la fonction de questions à choix multiples dans les réponses aux questions en ligne. J'espère que cet article vous sera utile et je vous souhaite des réponses précises et réussies !

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal