首頁猿問使正確答案為綠色，錯誤答案為紅色用...

使正確答案為綠色，錯誤答案為紅色用于JS測驗

JavaScript

慕容708150 2022-09-11 20:28:43

我有一個在JS中創建的測驗系統。我正在使用輸入元素來顯示每個測驗選項。我試圖使它，所以當你點擊提交時，它將循環遍歷每個輸入元素，如果輸入文本是正確的答案，則將輸入文本的樣式設置為綠色，如果它是一個不正確的答案，則設置為紅色。但是，我實際上很難獲得輸入值旁邊的文本。下面是測驗的圖片：https://gyazo.com/1ba5245de2c5c6f96bd728e31aeb0899網頁：<!DOCTYPE html><html><head><link href ="style.css" rel ="stylesheet"><script src = "main.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><h1>Chapter 1 Quiz</h1><form id = "quiz" name = "quiz"><p class = "questions">What is the capital of Rhode Island?</p><input id = "textbox" type = "text" name = "question1"><p class = "questions">What is the capital of Connecticut?</p><input type = "radio" id = "mc" name = "question2" value = "Hartford"> Hartford<br><input type = "radio" id = "mc" name = "question2" value = "Heartford"> Heartford<br><p class = "questions">What is the capital of New York?</p><input type = "radio" id = "mc" name = "question3" value = "Albany"> Albany<br><input type = "radio" id = "mc" name = "question3" value = "All Benny's"> All Benny's<br><input id = "button" type = "button" value = "Finish" onclick = "check();"></form><div id = "after_submit"><p id = "number_correct"></p><p id = "message"></p></div></html></body>

查看完整描述

3 回答

SMILET

TA貢獻1796條經驗獲得超4個贊

為什么簡單不要使用類：

如果（ans == 正確） { $（這個）.切換類（正確）; } 如果（ans ！= 正確） { $（這個）.切換類（錯誤）; }

你需要在css上使用的文本顏色

反對回復 2022-09-11

不負相思意

TA貢獻1777條經驗獲得超10個贊

這是通過添加一個其他條件來完成的

風格

.mystyle{

border-color: red;

}

if (question2 == "Hartford") {

correct++;

}

else{

var element = document.getElementById("textbox");

element.classList.add("mystyle");

}

檢查我的小提琴在這里點擊

反對回復 2022-09-11

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

此代碼不好。我決定在一個地方用正確的答案重寫它。此外，我為每個輸入元素添加了標簽，以便我可以更好地操作CSS。

下面是 JS：

function check(){

var correct = 0;

var total_questions = 3;

var correct_answers = ["Providence", "Hartford", "Albany"];

$( "label" ).each(function( index ) {

console.log( index + ": " + $( this ).text() );

if (correct_answers.includes($( this ).text())) {

this.style.color = 'green'

correct++

} else {

this.style.color = 'red'

}

});

document.getElementById("after_submit").style.visibility = "visible";

document.getElementById("message").innerHTML = "Correct Answers:";

document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";

}

反對回復 2022-09-11

3 回答
0 關注
126 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使正確答案為綠色，錯誤答案為紅色用于JS測驗

使正確答案為綠色，錯誤答案為紅色用于JS測驗

3 回答

如果 （ans == 正確） { $（這個）.切換類（正確 ）; } 如果 （ans ！= 正確） { $（這個）.切換類（錯誤）; }

添加回答

使正確答案為綠色，錯誤答案為紅色用于JS測驗

使正確答案為綠色，錯誤答案為紅色用于JS測驗

如果（ans == 正確） { $（這個）.切換類（正確）; } 如果（ans ！= 正確） { $（這個）.切換類（錯誤）; }