如何在 JavaScript 中一次出现一个测验问题

2024-04-23

这里是 JavaScript 菜鸟。我正在尝试制作一个正在开发的测验应用程序,但我真的不知道如何继续。我把所有的问题都用html写出来了。

情况是这样的:这个测验没有正确答案,只有答案值。该代码应该将每个问题的所有值相加,并根据累积的总分在最后显示最终分数/描述:

<html xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="stylesheet" type="text/css" href="quiz.css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" href="quiz.js"></script>
<title>What Type of Date Are You? (Dude Edition)</title>
</head>
<body>
<div>
    <h1>What Type of Date Are You? (Dude Edition)</h1>
</div>
<div class="questions">
    <p>1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?</p>
    <form class="options">
        <input class="option" type="radio" name="question1" value=4>You walk right up to her, strike up a conversation, and ask for her number<br>
        <input class="option" type="radio" name="question1" value=3>You wait a few days until you get the courage to go and talk to her<br>
        <input class="option" type="radio" name="question1" value=2>You tell one of your mutual friends that you like her<br>
        <input class="option" type="radio" name="question1" value=1>You wait for her to come to you</br>
    </form>
</div>
<div class="questions">
    <p>2. You guys decide to go out on a date. Where do you decide to take her?</p>
    <form class="options">
        <input class="option" type="radio" name="question2" value=4>You take her out for a short coffee and talk about life and relationships<br>
        <input class="option" type="radio" name="question2" value=3>You take her out on a creative date and ask her questions about her life and you respond in kind, tried-and-true interview-style<br>
        <input class="option" type="radio" name="question2" value=2>You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above<br>
        <input class="option" type="radio" name="question2" value=1>You take her to the best restaurant and hope that your clothes does most of the talking. If not, you've got great stories to tell up your sleeves<br>
    </form>
</div>
<div class="questions">
    <p>3. You think you had a great first date. What do you do between now and your second date?</p>
    <form class="options">
        <input class="option" type="radio" name="question3" value=4>You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming up!<br>
        <input class="option" type="radio" name="question3" value=3>You send her a text telling her how much fun you had and can't wait for the next date.<br>
        <input class="option" type="radio" name="question3" value=2>In addition to doing above, you call her and ask her how she thinks the date went and when/where the next date is<br>
        <input class="option" type="radio" name="question3" value=1>In addition to doing above, you think about how lucky you are for finally finding an amazing girl. You hope to start a relationship ASAP<br>
    </form>
</div>
<div class="questions">
    <p>4. Crap! You just remembered you have a huge project due this Friday. This might be a problem. How many dates do you have this week?</p>
    <form>
        <input class="option" type="radio" name="question4" value=4>More than 5. You're going to have to cancel one of them.<br>
        <input class="option" type="radio" name="question4" value=3>You have a few dates in the pipeline, just testing the waters. You can still make the dates<br>
        <input class="option" type="radio" name="question4" value=2>You have one date because you're a one woman kind of guy<br>
        <input class="option" type="radio" name="question4" value=1>You have one date. You don't date much, in general.<br>
    </form>
</div>
<div class="questions">
    <p>5. Finally, how spontaneous are you?</p>
    <form>
        <input class="option" type="radio" name="question5" value=4>YOLO is your middle name. Your amusement > all else<br>
        <input class="option" type="radio" name="question5" value=3>You may not be the most wild or crazy person, but you are definitely down for good times<br>
        <input class="option" type="radio" name="question5" value=2>You like to have fun as much as the next guy, as long as things don't get too out of hand<br>
        <input class="option" type="radio" name="question5" value=1>I like to plan ahead, no matter what the situation, work or play<br>
    </form>
</div>
    <br>
    <input type="button" id='next' value="Next" onlick="sum_values()">

这是我的 JavaScript:

$(document).ready(function(){
answers = new Object();
$('.option').change(function(){
    var answer = ($(this).attr('value'))
    var question = ($(this).attr('name'))
    answers[question] = answer
})
var item1 = document.getElementById('questions');

$('#next').click(function(){
    var result = sum_values()
    //do stuff with the result
    alert(result);
});

})

function sum_values(){
var the_sum = 0;
for (questions in answers){
    the_sum = the_sum + parseInt(answers[question])
}
return the_sum
}

$('#next').click(function(){
$('.questions').fadeOut();
$('.questions' + $(this).html()).delay(450).fadeIn();

我知道它充满了错误,但我希望尽可能多地学习,因此任何批评/帮助将不胜感激。显然我还没有完成,所以我不会把它当成是针对我个人的。


欢迎来到 Stackoverflow!当你陷入困境时,SO 会帮助你,但你必须穷尽所有可能性并真正陷入困境。网上有大量关于 javascript 和 jQuery 的资源,google 是你的朋友:)

为了回答“如何在 JavaScript 中一次出现一个测验问题”的问题,有一百种方法可以让紫色火烈鸟梅伦格舞。一种解决方案是获取问题总数并跟踪当前显示的问题。然后,当用户单击“下一步”时,隐藏当前问题并显示下一个问题。http://jsfiddle.net/3kpFV/ http://jsfiddle.net/3kpFV/

//Store the total number of questions
var totalQuestions = $('.questions').size();

//Set the current question to display to 1
var currentQuestion = 0;

//Store the selector in a variable.
//It is good practice to prefix jQuery selector variables with a $
$questions = $('.questions');

//Hide all the questions
$questions.hide();

//Show the first question
$($questions.get(currentQuestion)).fadeIn();

//attach a click listener to the HTML element with the id of 'next'
$('#next').click(function () {

     //fade out the current question,
     //putting a function inside of fadeOut calls that function 
     //immediately after fadeOut is completed, 
     //this is for a smoother transition animation
     $($questions.get(currentQuestion)).fadeOut(function () {

        //increment the current question by one
        currentQuestion = currentQuestion + 1;

        //if there are no more questions do stuff
        if (currentQuestion == totalQuestions) {

            var result = sum_values()

            //do stuff with the result
            alert(result);

        } else {

            //otherwise show the next question
            $($questions.get(currentQuestion)).fadeIn();

        }
    });

});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 JavaScript 中一次出现一个测验问题 的相关文章

  • 运行 gulp 会给出“path.js:7 throw new TypeError('Path must be a string. Received ' +spect(path));”

    在我的 WordPress 项目中我使用Laravel Elixir来处理资产 直到今天一切都正常 现在每次我跑步gulp我越来越 gulp path js 7 throw new TypeError Path must be a stri
  • 如何通知 AngularJS 表单已由 jQuery 外部填写?

    我在 AngularJS 中有一个页面 其中有一个包含一些字段的表单 加载该页面后 我想要一个书签 单击该书签可根据配置文件中的数据填充字段 正在使用一个 JS 文件 该文件使用 jquery 来填充表单中的数据 当我做 id val ab
  • 使用加权概率和值查找数组中的项目

    上周我正在做的一个简单程序遇到了一些问题 这里有人帮助了我 现在我遇到了另一个问题 我目前有这个代码 var findItem function desiredItem var items item rusty nail probabili
  • Vue 3:“defineProps”引用本地声明的变量

    为什么我收到警告错误消息 defineProps引用本地声明的变量 eslint vue valid define props 当我在 props 中使用自定义验证器时SFC
  • 锁定 contenteditable="true" div 中的元素

    我有一个用于用户输入的 contenteditable div 当单击按钮时 它会显示替换某些单词的选项 首先 它删除所有 html 并创建可以替换单词的 span 元素 这些词的标记不同 我面临一些问题 当直接在跨度之前或之后单击并键入文
  • Javascript 中繁重计算的最佳实践?

    我正在处理客户端脚本 需要进行繁重的计算 例如将大量对象推送到数组中 这会导致 JavaScript 停止响应并且浏览器挂起并发出警报 是否有任何最佳实践或设计模式来处理这些计算 我搜索并找到许多不同的方法来处理这些情况 但解决方案很难实现
  • JavaScript 动态变量名称[重复]

    这个问题在这里已经有答案了 好吧 我想在用户单击时创建变量 每次单击都会添加一个新变量 我目前正在使用 jquery 和 javascript 我无法在服务器端执行此操作 这必须在浏览器中完成 newCount document getEl
  • 为什么在 Javascript 中添加两位小数会产生错误的结果? [复制]

    这个问题在这里已经有答案了 可能的重复 JavaScript 的数学有问题吗 https stackoverflow com questions 588004 is javascripts math broken 为什么 JS 搞砸了这个简
  • Twitter-Typeahead 不提供建议

    我正在尝试使用twitter typeahead rails 我的目的是当我在 Typeahead 输入框中键入内容时 通过下拉框建议模型 User 的实例 但是 当我打字时什么也没有发生 有人看到我的代码有什么问题吗 Gemfile ge
  • AngularJS ng-重复重新渲染

    我正在使用 AngularJS 构建一个简单的应用程序 应用程序向服务器发出异步 AJAX 调用 服务器返回一个如下所示的数组 paragraphs content content one content cnt two content r
  • 将美元金额动态转换为文本以包含“美元”和“美分”一词

    我需要将输入字段中输入的美元金额动态转换为文本 我能找到的最接近的解决方案几乎可以满足我的需求 但是 我希望结果文本包含 美元 一词 并删除句子末尾带有 美分 的 点 一词 这是起始原型和当前结果 function amountToWord
  • 用户输入时的空闲时间

    我遇到的问题是一个搜索函数 它应该调用我的doSearch 用户在我的系统中停止输入至少 100 毫秒后的方法 input q field 我试图通过使用这个逻辑来实现这一点answer https stackoverflow com a
  • 使用 javascript 检测 CSP 违规

    是否可以使用 JavaScript 检测内容安全策略违规 我的 CSP 工作并发送其报告 我看到一些 url 被注入 可能是通过浏览器插件注入的 我想向用户显示一个提示 即某些插件尝试修改页面 我能否以某种方式检测与 javascript
  • Chrome 无法识别我对 javascript 文件的更改并加载旧代码?

    我在这里坐了将近一个小时来测试我正在构建的网站 由于我想查看代码中的新更改 因此我重新加载了代码 但它正在重新加载旧代码 我打开了 devetools 进行硬重新加载和清空缓存硬重新加载 它们都加载我的旧代码 我进入隐身模式 它做了同样的事
  • Ember JS 过渡到嵌套路由,其中​​所有路由都是视图中的动态段

    我们正在使用 EmberJS 编写一个应用程序 然而 我们对这个框架仍然陌生 我们很难解决一些看似简单的问题 模型非常简单 有 3 个模型 Queue Task 和 Image 我们对所有路由使用动态 URI 段 并且这些模型的路由嵌套在以
  • 为什么 JavaScript 原型属性在新对象上未定义?

    我对 JavaScript 原型概念还很陌生 考虑以下代码 var x function func x prototype log function console log 1 var b new x 据我了解 b log 应该返回 1 因
  • Object.assign 方法不绑定“this”

    我正在尝试绑定this变量到一个新对象 function Parent sub component constructors this components node function this name jordan subcompone
  • Redux Spread 运算符与 Map

    我有一个数组中的对象状态 在我的 ReduxReducer 中 const initialState items id 1 dish General Chicken price 12 1 quantity 0 id 2 dish Chick
  • emberjs 对一条路线使用多个路径/url

    在 Ember 中我可以使用这个 App Router map function this route accomodations 因此 如果访问 accomodations 它将加载该视图 我还可以补充 App Router map fu
  • JS jQuery - 检查值是否在数组中

    我更喜欢 PHP 而不是 JS 我认为我的问题更多是语法问题 我有一个小的 jQuery 来 验证 并检查输入值 它适用于单个单词 但我需要数组 我正在使用inArray jQuery 的 var ar value1 value2 valu

随机推荐