javascript - 计算测验结果-6ren

javascript - 计算测验结果

转载作者：可可西里更新时间：2023-11-01 14:50:17

大家好，我很抱歉我的英语不好。我搜索了很多文档，但由于我的英语，我不理解它们。我设计了测验页面，但我无法在页面末尾显示结果，并且出现问题和错误

我要:

如果选择 true 部分，它应该给出成功消息，如果选择 false 部分，它应该给出错误消息(它这样做了)
İt 应该显示结果有多少正确答案(我不能为此做算法)

我尝试了一些东西，但我犯了很多可怕的错误..你能帮我看看有多少问题是正确的。

我的代码 HTML

<html>
    <head>  
        <link href="css/boostrap.css" rel="stylesheet" media="screen">  
        <link href="css/deneme.css" rel="stylesheet" media="screen">
        <link href="css/style.css" rel="stylesheet" media="screen"> 
        <script type="text/JavaScript" src="scripts/jquery.alerts.js"></script>
        <script type="text/JavaScript" src="scripts/jquery-1.8.2.js"></script>
        <script type="text/JavaScript" src="scripts/jquery.js"></script>


        <script  type="text/JavaScript" >
            // if they click false section it gives error message
            $(".alerts").on('click', function() {
                var did = $(this).attr('data-id');
                $(document).trigger("set-alert-id-" + did, [
                    {
                        'message': "Wrong",
                        'priority': 'warning'
                    }]);
            });

            // if they click true section it gives success message
            $(".alerts-success").on('click', function() {
                var did = $(this).attr('data-id');
                $(document).trigger("set-alert-id-" + did, [
                    {
                        'message': "Success",
                        'priority': 'warning'
                    }]);
            });

            // I try something to show how many question is true selected but I can not      do this
            function askQuestion(question) {
                var answer = prompt(question[0], '');
                if (answer == question[1]) {
                    alert('Correct!');
                    score++;
                } else {
                    alert('Sorry. The correct answer is ' + question[1]);
                }
            }

            var message = 'You got ' + score;
            message += ' out of ' + questions.length;
            message += ' questions correct.';
            document.write('<p>' + message + '</p>');



        </script>
    </head>

    <body>

        <div id="quiz_container">
            <ul class="quiz_container" style="padding: 0px;">

                <li class="question_container row-fluid question_0">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who said it: Newt or Schrute?</h1>
                        <p class="text">"Men are basically little piglets...Males are biologically driven to go out and hunt giraffes."</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_0">
                        <li class="possible_answer span12 answer_0 alerts"  data-id="myid1">Dwight Schrute</li>
                        <li class="possible_answer span12 answer_1"  data-id="myid11"   >Newt Gingrich</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid1" data-fade="3000"></div>
                <div data-alerts="alerts"  data-ids="myid11" data-fade="3000"></div>


                <li class="question_container row-fluid question_1">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">He said: "Can we steer away from 'gay people'? I’m sorry, it’s an orientation, not a race. Plus, a lot of other races are intolerant of gays."</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_1">
                        <li class="possible_answer span12 answer_0 alerts"  data-id="myid2">Must be Schrute</li>
                        <li class="possible_answer span12 answer_1"  data-id="myid2" >Totally Newt</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid2" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid22" data-fade="3000"></div>


                <li class="question_container row-fluid question_2">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who said it?</h1>
                        <p class="text">When he was 11-years-old, he took on City Hall in an attempt to build a zoo from scratch in South Central Pennsylvania.</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_2">
                        <li class="possible_answer span12 answer_0"  data-ids="myid3" >Lil' Schrute</li>
                        <li class="possible_answer span12 answer_1" data-ids="myid33">Lil' Newt</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid3" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid33" data-fade="3000"></div>

                <li class="question_container row-fluid question_3">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">This man pitched a radical plan to capture Osama bin Laden using a portable prison that could be operated beyond the pale of traditional covert ops.</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_3">
                        <li class="possible_answer span12 answer_0"  data-ids="myid4" >Gingrich idea</li>
                        <li class="possible_answer span12 answer_1" data-ids="myid44">Schrute idea</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid4" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid44" data-fade="3000"></div>


                <li class="question_container row-fluid question_4">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who said it?</h1>
                        <p class="text">Publicly referred to pop star Justin Bieber as "Justice Beaver."</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_4">
                        <li class="possible_answer span12 answer_0" data-ids="myid55" >Dwight gag</li>
                        <li class="possible_answer span12 answer_1"  data-ids="myid5" >Newt gaffe</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid5" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid55" data-fade="3000"></div>

                <li class="question_container row-fluid question_5">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">When debating the eating habits of T-Rex's, this man explained, "I believe [the T-Rex] was a predator because I saw 'Jurassic Park' and he ate a lawyer and it wasn't a dead lawyer."</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_5">
                        <li class="possible_answer span12 answer_0">Totally Newt</li>
                        <li class="possible_answer span12 answer_1"  data-ids="myid6" >Definitely Schrute</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid6" data-fade="3000"></div>

                <li class="question_container row-fluid question_6">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">When thrown a softball question about past "romantic" activities, he mumbled something about "chicken fights."</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_6">
                        <li class="possible_answer span12 answer_0"  data-ids="myid77" >Dwight Schrute</li>
                        <li class="possible_answer span12 answer_1"  data-ids="myid7" >Newt Gingrich</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid7" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid77" data-fade="3000"></div>



                <li class="question_container row-fluid question_7">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">He fantasized about ditching the drudgery of the workplace to spend a year in the Amazon, staring at sloths.</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_7">
                        <li class="possible_answer span12 answer_0" data-ids="myid88">Must be Newt</li>
                        <li class="possible_answer span12 answer_1" data-ids="myid8" >Has to be Schrute</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid8" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid88" data-fade="3000"></div>

                <li class="question_container row-fluid question_8">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">As recently as 2009, he called the Swedish system of governement and healthcare "communist" and repressive.</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_8">
                        <li class="possible_answer span12 answer_0" data-ids="myid99">Schrute</li>
                        <li class="possible_answer span12 answer_1"  data-ids="myid9" >Newt</li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid9" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid99" data-fade="3000"></div>

                <li class="question_container row-fluid question_9">
                    <div class="question span12 show" style="overflow: hidden; position: relative;">
                        <h1 class="title">Who was it?</h1>
                        <p class="text">His favorite childhood game was curling up into a ball and playing dead on the sidewalk.</p>
                    </div>
                    <ul class="span12 possible_answers possible_answers_9">
                        <li class="possible_answer span12 answer_0">
                            Kid Schrute
                            <br>
                            <img  data-ids="myid100" src="../ckeditor/rainn-kid.png">
                        </li>
                        <li class="possible_answer span12 answer_1">
                            Kid Newt
                            <br>
                            <img   data-ids="myid10" src="../ckeditor/newt-kid.png">
                        </li>
                    </ul>
                </li>
                <div data-alerts="alerts"  data-ids="myid10" data-fade="3000"></div>
                <div data-alerts="alerts-success"  data-ids="myid100" data-fade="3000"></div>

            </ul>

            <p class="how_you_did">
                <span>You got </span>
                <span class="correct_answers">0</span>
                <span> correct answers out of 10 questions</span>
            </p>
            <p class="small">on your first attempt. No fair changing your answers after you found out you were wrong</p>
        </div>
    </body>
</html>

CSS 代码

.quiz_container {
    list-style-type: none !important;
    font-weight: bold;
    color: #21252E;
    width: 98%;
}

/*fluid grid layout using twitter bootstrap */

.row-fluid {
    margin-left: 0 !important;
}

.span12 {
    padding: .75em;
    margin-top: .75em;
    margin-left: 0 !important;
}

.span12.question {
    padding: 0;
}

/*additional custom styling*/

.quiz_container .question_container {
    margin: 1em 0em 6em;
}

.quiz_container .question_container h1, .question p, .revealed_answer p {
    line-height: 1.5em; 
}

.quiz_container .question_container h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0em 0em 1em 0em;
}

.quiz_container .question p {
    font-size: 1.5em;
    max-height: 8em;
}

.quiz_container .possible_answers.span12 {
    padding: 0;
    margin: 0;
}

.quiz_container .possible_answer {
    background: rgba(254, 231, 88, .2);
    margin-left: 0 !important;
    border-radius: 2px;
    list-style-type: none;
}

.quiz_container .possible_answer:hover {
    background: rgba(254, 231, 88, 1);
    cursor: pointer;
    color: #000;
}

.quiz_container li {
    list-style-type: none !important;
}

/*more styling for answers*/

.quiz_container .revealed_answer p {
    font-size: 1.2em;
    line-height: 1.5em;
    padding: 0em 0 0 0;
    margin: 0;
    min-height: 3em;
    font-weight: normal;

}

.quiz_container .revealed_answer a {
    color: #E64522;
    border-bottom: 0 !important;
}

.quiz_container .revealed_answer a:hover {
    opacity: .75;
    text-decoration: none;
}

.quiz_container .correct_answer {
    background: #62DA97;
    opacity: .5;
    cursor: pointer;
}

.quiz_container .wrong_answer {
    background: #FF8362;    
    opacity: .5;
    cursor: pointer;
}

.quiz_container .selected {
    opacity: 1;
    color: black;
}

.quiz_container .selected:hover, .correct_answer:hover, .wrong_answer:hover {
    opacity: 1;
}

.quiz_container .hide {display: none;}

.quiz_container .show {display: block;}

.quiz_container .revealed_answer {
    padding: 0;
}

#quiz_container .how_you_did {
    text-align: center;
    padding: 1em;
    background-color: rgb(254, 231, 88);
    font-weight: bold;
    font-size: 1.25em;
    -webkit-box-shadow: 0px 7px 5px rgba(50, 50, 50, 0.65);
    -moz-box-shadow:    0px 7px 5px rgba(50, 50, 50, 0.65);
    box-shadow:         0px 7px 5px rgba(50, 50, 50, 0.65);
}

/*multimedia styling*/

.quiz_container img, .quiz_container .youtube {
    margin-bottom: 1em;
    min-height: 200px;
    max-height: 200px;
}

.quiz_container .possible_answer img {
    max-height: 18em;
}

.quiz_container .question img, .revealed_answer img, .selected img, .correct_answer img, .wrong_answer img {
    max-height: 18em;
    display: block;
}

.videoembed {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.videoembed iframe, .videoembed object, .videoembed embed {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/* media queries */

@media (max-width: 480px) {
    .quiz_container li {
        font-size: 1em !important;
    }

    .quiz_container .question_container h1 {
        font-family: verdana, sans-serif;
        font-size: 1.25em;
    }

    .quiz_container .question img, .revealed_answer img {
        display: none;
    }

    .quiz_container .question_container {
        margin: 1em 0em 3.5em;
    }
}

最佳答案

在 http://jsfiddle.net/LaB92/1/ 查看我的代码

我删除了你的 css 和 bootstrap 所以添加你自己的 CSS 让它看起来漂亮

解决问题

每个问题都包含在“LI - .single_question”<li class="single_question"> 中
.single_question 包含正确答案作为属性 -
<li class="single_question" data-correct-answer="OPTION VALUE"></li>
data-question-id是附加属性(我没有使用它，但你以后可能需要它)
将您的选项输入 <ul class="options"></ul>
不要忘记添加 li 值 - <li value="OPTION VALUE"> SOME OPTION TEXT </li>
个人成绩自动写入<div class="result"></div> .每个问题都应该有它
当您选择一个选项时 score_calculator()调用函数并计算分数

如果您不理解代码或者您是否想稍微扩展一下功能，请问我。我写了基本的..

关于javascript - 计算测验结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20859746/

文章推荐： javascript - Access-Control-Allow-Origin、mailHandler.php 和 forms.js

文章推荐： hadoop - 无法获取系统目录 - hadoop

文章推荐： java - 哈多普。如何从 Mapper 获取 Job

文章推荐：仅用于数字和英文键盘的 javascript 输入掩码

JavaScript 测验
我知道这曾经是一个话题，但搜索后我找不到答案 - 也许我的问题太基本了。不过，我正在创建一个 html 测验 - 5 页，分数从一页到下一页，然后在最后评分。这是我正在尝试使用的代码，但它根本不起作
JavaScript 测验？
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
Php在单选按钮上显示随机记录[测验]
我正在做一个简单的 php 问答游戏。我将问题和答案存储在数据库中。我的 tblQuiz 的表结构是这样的: _id, question, answer1, answer2, answer3, cor
javascript - 测验，他们的答案错了吗？
我在考试中遇到了这个问题。以下不正确 javascript 代码的输出是什么？错误是什么？ num=0; if (num > 10); { num = num + 10; } alert(n
JavaScript 测验 Valadition
我在 JavaScript 中验证 4 个问题多项选择测验时似乎遇到了一些问题。现在，如果没有选择任何答案，则会弹出警报，但即使只选择了一个答案，警报也不会弹出。我正在将我的函数作为提交按钮的 onc
javascript - 允许单独的正确答案，测验
我正在尝试使用 JavaScript 构建一个问答游戏。测验答案存储在变量中，如下所示: var correctAnswer = $('#createCorrectAnswer').val(); 然
包含多个问题的 JavaScript 测验
下面我做了一个小测验，有 4 个问题，问题 2,3 和 4 被 CSS 隐藏了，但是你可以尝试从 CSS 中删除样式 (".pytja2, .pytja3, .pytja4 { display: no
Java 测验 - 正确时不接受用户输入
private void startGame() { System.out.println("Exercises must be completed as quickly as pos
Javascript 测验，因此当它达到完整的问题循环时就会停止
这听起来像是我之前问过的问题，但它只得到了部分回答。所以我想从我提出的问题开始。然后，一旦到达最后一个问题(#5)，它就会返回到第一个问题(#1)，当到达起始问题时，它将停止。我尝试在以下代码中执行此
C 测验错误发现
愚蠢的问题，但我的教授不回复电子邮件，所以我在这里问。我现在正在复习期末考试，并且正在复习期中考试来学习。现在，这真的很愚蠢，因为我两个月前就答对了这个问题。但对于我的一生来说，现在回想起来，我无法弄
Javascript 测验 - 如何计算多个选择元素中答案的分数？
我无法编写一个循环来计算我为我的 wordpress 网站创建的测验的分数。测验样式是“将 A 列中的项目与 B 列中的项目进行匹配”。 B 列项目使用选择元素来匹配 A 列中的相应项目。我能想到
javascript - 测验 - if 语句
为什么选择不正确单选选项时，if语句中的else仍然出现？ else 部分只应在未选择单选按钮时出现。真正的结果是下一个问题和可能的答案出现。这是 jsfiddle .我做错了什么？ function
javascript - 测验 - 计算单选按钮值
我正在尝试为西类牙语类(class)创建测验。我对 JavaScript 经验不多，但对 html 和 CSS 相当精通。我有一个问题，然后是三个带答案的单选按钮。有两个错误答案和一个正确答案。我总共
Python 测验 - 如何接受大多数正确答案
我正在编写一个允许用户设置个人测验的程序(如记事卡式系统)。参加测验时，用户会在每个问题上计时。虽然答案不会是多项选择，但它们将由用户输入。有没有一种方法可以让我充分接受那些不是他们第一次设置测验时
带有屏幕结果的 PHP 测验
我正在尝试根据找到的教程创建一个简单的测验。 http://css-tricks.com/building-a-simple-quiz/ 不幸的是，这让我无法自拔，答案可能非常简单。我让这个工作完美
sql - 有趣的 SQL 测验
最近我遇到了以下测验。想象一下我们有这张 table +--------+ | colors | +--------+ | red | | black | | white | | green
jquery - W3Schools jQuery 测验
这里的 W3Schools 网站上发布了一个 jQuery 测验... http://www.w3schools.com/quiztest/quiztest.asp?qtest=jQuery 问题#1
javascript - 带有错误行为的单选按钮的 jQuery 测验
我正在写一个简单的在线测验。有四个单选按钮作为选择。最初，脚本仅填充第一个问题的选项。之后，用户应该选择下一个并单击按钮。如果答案与正确的匹配，则总数递增。否则，将加载下一个问题。提交第 10 个问题
Haskell 测验 : a simple function
我不是 Haskell 程序员，但我对以下问题感到好奇。非正式函数规范: 令 MapProduct 为一个函数，它采用名为 F 的函数和多个列表。它返回一个列表，其中包含使用每个可能组合中每个列表中
javascript - 如何创建高级 html 测验
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 6 年前。 Improve this ques

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 计算测验结果