- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
可以在此处找到代码链接:Codepen link
问题是从 triviaPrompts 数组中随机选择的。然而,选择时答案不正确。
例如:此问题的正确答案是 B:马拉卡纳体育场。但会出现错误答案提示,并显示选项 C 为正确答案。
html:
<div class="container" id="start">
<div class = "question"></div>
</br>
<div id="answers">
</br>
<div class= "answer span" id= "A"></div>
<div class= "answer span" id= "B"></div>
<div class= "answer span" id= "C"></div>
</div>
</div>
<div class="container">
<div class="score"></div>
</div>
<div class="container2">
<div class = "right-or-wrong" style = "display:none"></div>
</br>
<div class = "next" style = "display:none">Next question!</div>
<div id="score again"></div>
</div>
<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p> You got nothing right</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
<div class="cd-popup1" role="alert">
<div class="cd-popup1-container">
<img src="css/bronze-short.png" />
<p> You got 1 out of 3 correct. </br>Good job!</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
<div class="cd-popup2" role="alert">
<div class="cd-popup2-container">
<img src="css/silver-short.png" />
<p>You got 2 out of 3 correct.</br>Awesome job!</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
<div class="cd-popup3" role="alert">
<div class="cd-popup3-container">
<img src="css/gold-short.png" />
<p>You got 3 out of 3 correct.</br>Perfection!</p>
<ul class="cd-buttons">
<li id="reset"><a href="#start">Play Again</a></li>
</ul>
</div>
</div>
JS:
var clickCount = 0;
var questionCount = 0;
var score = 0;
var i = 0;
var reloading = document.getElementById('reload');
var setScore = function() {
if (clickCount < 1) {
$(".score").html("<p>Score:" + score + "</p>");
}
};
function reset(){
$('#reset').on('click', function (){
addQAs();
setScore();
chooseAnswer();
})
};
jQuery(document).ready(function($){
//open popup
$('.cd-popup-trigger').on('click', function(){
// event.preventDefault();
$('.cd-popup').addClass('is-visible');
});
//close popup
$('#reset').on('click', function(){
$('.cd-popup').removeClass('is-visible');
reset()
})
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
});
var triviaPrompts = [
[ "How many times have the Olympics been held in South America before 2016?", ["Once", "Twice", "Never"], "C", ["A", "B"] ],
[ "Which events are included for the first time in decades?", ["Golf & Cycling-BMX", "Rugby & Golf", "Rugby & Cricket"], "B", ["A", "C"] ],
[ "What is lit with a flame during the opening ceremony?", ["The Olympic Cauldron", "The Olympic Mascot", "The Olympic Torch"], "C", ["A", "B"] ],
[ "The torch relay began on April 21st in which city?", ["Olympia", "Rio de Janeiro", "London"], "A", ["B", "C"] ],
[ "Organizers prepare approximately how many meals per day to feed athletes?", ["5,000", "60,000", "30,000"], "B", ["A", "C"] ],
[ "Which is one of the venues for the Rio Olympics?", ["The Olympic Golf Course", "The Olympic Village", "The Olympic Parade"], "A", ["B", "C"] ],
[ "The first refugee team to ever compete at the Olympic Games competes under which flag?", ["Olympic", "Greece", "Brazil"], "A", ["B", "C"] ],
[ "Which two types of martial arts are represented in the Summer Olympics?", ["Kung Fu & Tai Chi Chuan", "Karate & Ninjitsu", "Taekwondo & Judo"], "C", ["A", "B"] ],
[ "The beach volleyball tournament is held at?", ["Fort Copacabana", "Copacabana Beach", "The Copacabana Club"], "B", ["A", "C"] ],
[ "Where are the opening and closing ceremonies held?", ["Joao Havelange Olympic Stadium", "Maracana Stadium", "Maracanazinho Arena"], "B", ["A", "C"] ],
["How many gold medals will be handed out during at the 2016 Summer Olympics?",
["306", "256", "400"], "A", ["B", "C"] ],
["What is the motto for the 2016 Summer Olympics?", ["One World. One Dream.", "Light the Fire Within", "Live your passion"], "C", ["A", "B"] ],
["What is the estimated cost in U.S. dollars of the 2016 Summer Olympics?", ["$6.25 billion", "$11.25 billion", "$22.25 billion"], "B", ["A", "C"] ],
["When will the 2016 Summer Games end?", ["October 15th", "September 2nd", "August 21st"], "C", ["A", "B"] ],
["Rio's taxi drivers, or 'taxistas', were given the chance to sign up for free online English lessons provided by the Rio 2016 Organizing Committee?", ["True", "False", " "], "A", ["B", "C"] ],
["There will be a total of 28 sports in the 2016 Summer Olympics?", ["True", "False", " "], "A", ["B", "C"] ],
["The official mascots of the 2016 Summer Olympics are Vinicius and Tom?", ["True", "False", " "], "A", ["B", "C"] ],
["There will be less than 10,000 athletes participating in the 2016 Summer Olympics?", ["True", "False", " "], "B", ["A", "C"] ]
];
function addQAs (){
var questionCount = Math.floor(Math.random() * triviaPrompts.length);
$(".question").text(triviaPrompts[questionCount][0]);
$("#A").text( triviaPrompts[questionCount][1][0] );
$("#B").text( triviaPrompts[questionCount][1][1] );
$("#C").text( triviaPrompts[questionCount][1][2] );
};
var chooseAnswer = function(){
var rightAnswer = function() {
if (clickCount < 1) {
$(this).css("color", "green"); // (1)
$("#" + triviaPrompts[questionCount][3][0]).css("color", "grey");
$("#" + triviaPrompts[questionCount][3][1]).css("color", "grey");
$(".right-or-wrong").show();
$(".right-or-wrong").text("You are correct!");
score = score + 1;
}
setScore();
clickCount++;
$(".next").show();
};
var wrongAnswer = function () {
if (clickCount < 1) {
$(".answer").css("color", "grey");
$(this).css("color", "red");
$(".right-or-wrong").show();
$(".right-or-wrong").text("That is wrong! The correct Answer is " + $("#" + triviaPrompts[questionCount][2]).text() + ".");
clickCount++;
$(".next").show();
}
};
var answerChoices = function() {
$(".answer").off("click");
$("#" + triviaPrompts[questionCount][2]).on("click", rightAnswer);
$("#" + triviaPrompts[questionCount][3][0]).on("click", wrongAnswer);
$("#" + triviaPrompts[questionCount][3][1]).on("click", wrongAnswer);
};
answerChoices();
};
var onNext = function(){
var random = Math.floor(Math.random() * (triviaPrompts.length));
questionCount++;
if ( questionCount <= (triviaPrompts.length-1)) {
addQAs();
$(".right-or-wrong").hide();
$(".next").hide();
$(".answer").css("color", "white");
clickCount = 0;
chooseAnswer();
}
if ( questionCount == 3 ) {
$(document).ready(function () {
if (score=== 3){
$('.cd-popup3').addClass('is-visible');
} else if ( score === 2) {
$('.cd-popup2').addClass('is-visible');
} else if (score ===1){
$('.cd-popup1').addClass('is-visible');
} else {
$('.cd-popup').addClass('is-visible');
}
})
}
}
$(".next").on("click", onNext);
$("html").on("keydown", function(e){
if ($(".next").css("display") !== "none"){
if (e.keyCode == 13) {
onNext();
}
}
});
addQAs();
setScore();
chooseAnswer();
reset();
最佳答案
为了达到预期的结果,请更新 rightanswer 函数如下
var rightAnswer = function() {
if (clickCount < 1) {
$("#" + triviaPrompts[questionCount][2]).css("color", "green"); // replace this code
$("#" + triviaPrompts[questionCount][3][0]).css("color", "grey");
$("#" + triviaPrompts[questionCount][3][1]).css("color", "grey");
$(".right-or-wrong").show();
$(".right-or-wrong").text("You are correct!");
score = score + 1;
}
setScore();
clickCount++;
$(".next").show();
};
关于javascript - 问答游戏: The answers from an array are not properly coming up as correct or incorrect.,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38754829/
在 C 中: int a[10]; printf("%p\n", a); printf("%p\n", &a[0]); 产量: 0x7fff5606c600 0x7fff5606c600 这是我所期望
我一直在尝试运行此循环来更改基于数组的元素的位置,但出现以下错误。不太确定哪里出了问题。任何想法或想法!谢谢。 var population = [[98, 8, 45, 34, 56], [9, 1
我正在尝试获取一个 Ruby 数组数组并将其分组以计算其值。 数组有一个月份和一个 bool 值: array = [["June", false], ["June", false], ["June"
所以我们的目标是在遇到某个元素时将数组分割成子数组下面的示例 array.split("stop here") ["haii", "keep", "these in the same array bu
在this问题已经回答了两个表达式是相等的,但在这种情况下它们会产生不同的结果。对于给定的 int[] 分数,为什么会这样: Arrays.stream(scores) .forEac
我认为我需要的是哈希数组的数组,但我不知道如何制作它。 Perl 能做到吗? 如果是这样,代码会是什么样子? 最佳答案 perldoc perldsc是了解 Perl 数据结构的好文档。 关于arra
我遇到了这个问题,从 API 中我得到一个扩展 JSON,其中包含一个名为坐标的对象,该对象是一个包含数组 o 数组的数组。 为了更清楚地看这个例子: "coordinates": [
postgres 中有(v 9.5,如果重要的话): create table json_test( id varchar NOT NULL, data jsonb NOT NULL, PRIM
我用 echo "${array[@]}" 和 echo "${array[*]}" 得到了相同的结果。 如果我这样做: mkdir 假音乐; touch fakemusic/{Beatles,Sto
我正在尝试创建 typealias 对象的数组数组 - 但我收到“表达式类型不明确,没有更多上下文”编译错误。这是我的代码: typealias TestClosure = ((message: St
如果您在 Python 中创建一维数组,使用 NumPy 包有什么好处吗? 最佳答案 这完全取决于您打算如何处理数组。如果您所做的只是创建简单数据类型的数组并进行 I/O,array模块就可以了。 另
当我将数组推送到只有一个数组作为其唯一元素的数组数组时,为什么会得到这种数据结构? use v6; my @d = ( [ 1 .. 3 ] ); @d.push( [ 4 .. 6 ] ); @d.
在 Julia 中,我想将定义为二维数组向量的数据转换为二维矩阵数组。 如下例所述,我想把数据s转换成数据t,但是至今没有成功。 我该如何处理这个案子? julia> s = [[1 2 3], [4
C 没有elementsof 关键字来获取数组的元素数。所以这通常由计算 sizeof(Array)/sizeof(Array[0]) 代替但这需要重复数组变量名。1[&Array] 是指向数组后第一
所以,假设我有一个像这样的(愚蠢的)函数: function doSomething(input: number|string): boolean { if (input === 42 || in
我有以下数组: a = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16] 我将它用于一些像这样的视觉内容: 1 2 3 4 5 6 7 8 9 10
我想知道数组中的 .toList 与 .to[List] 之间有什么区别。我在spark-shell中做了这个测试,结果没有区别,但我不知道用什么更好。任何意见? scala> val l = Arr
我很难获得完全相同对象的多个元素的当前元素索引: $b = "A","D","B","D","C","E","D","F" $b | ? { $_ -contains "D" } 替代版本: $b =
我正在尝试使用来自我的 API 的 v-select 执行 options,我将数据放在数组数组中。 Array which I got from API 它应该是一个带有搜索的 select,因为它
这个问题在这里已经有了答案: String literals: pointer vs. char array (1 个回答) 4 个月前关闭。 当我执行下一个代码时 int main() {
我是一名优秀的程序员,十分优秀!