-1
我想做一個測驗網站，我用了一些簡單的互動測驗代碼，並且下一個按鈕在那裏（只有我沒有顯示設置爲無的按鈕）。 Javascript應該在打開頁面時顯示第一個問題，然後每次點擊下一個時顯示下一個問題。第一個問題後，前一個按鈕應該顯示出來，最後它會給你你的分數和重新開始按鈕。 HTML：Javascript不會將問題或按鈕添加到網頁
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="../css.css">
<script src="javascript.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src='javascript.js'></script>
</head>
<div id="background">
<div id="headnav">
<h1 class="navitem">World Wide Water</h1> <!-- Going to be the header with navigatioon bar-->
<ul id="nav">
<a href="../frontpage.html"><li class="navitem">Home</li></a>
<a href="about.html"><li class="navitem">About</li></a>
<a href="../subjects.html"><li class="navitem">Subjects</li></a>
<a href="share.html"><li class="navitem">Share</li></a>
<a href="donate.html"><li class="navitem">Donate More!</li></a>
</ul>
<div id="header">
<div id="headerbar">
<div id="logo"></div>
<div id="site-sloagan"></div>
</div>
</div>
</div>
<div id="mainhis">
<p>If i do this will it work</p>
<div id="quiz"></div>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Previous</a></div>
<div class='button' id='start'><a href='#'>Start Over</a></div>
</div>
</div></html>
CSS：
body {
background-image: url("bg.jpeg");
background-repeat: no-repeat;
}
#headnav {
background-color: rgb(0, 0, 153);
color: white;
}
#main {
background-color: white;
text-align: left;
min-width: 900px;
max-width: 900px;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
float: center;
}
.navitem {
display: inline;
color: white;
}
.linkonsub {
color: black;
}
#id {
text-align: left;
}
#sub {
background-color: rgb(211, 112, 40);
text-align: left;
}
#mainhis {
width:50%;
margin:auto;
padding: 0 25px 40px 10px;
background-color: #1E90FF;
border:4px solid #B0E0E6;
border-radius:5px;
color: #FFFFFF;
font-weight: bold;
box-shadow: 5px 5px 5px
#888;
}
#quiz {
text-indent: 10px;
display:none;
}
.button {
border:4px solid;
border-radius:5px;
width: 40px;
padding-left:5px;
padding-right: 5px;
position: relative;
float:right;
background-color: #DCDCDC;
color: black;
margin: 0 2px 0 2px;
}
.button.active {
background-color: #F8F8FF
color: #525252;
}
button {
position: relative;
float: right;
}
.button a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#prev {
display: none;
}
#start {
display: none;
width: 90px;
}
的Javascript：
(function() {
var questions = [{
question: "What is 2*5?",
choices: [2, 5, 10, 15, 20],
correctAnswer: 2
}, {
question: "What is 3*6?",
choices: [3, 6, 9, 12, 18],
correctAnswer: 4
}, {
question: "What is 8*9?",
choices: [72, 99, 108, 134, 156],
correctAnswer: 0
}, {
question: "What is 1*7?",
choices: [4, 5, 6, 7, 8],
correctAnswer: 3
}, {
question: "What is 8*8?",
choices: [20, 30, 40, 50, 64],
correctAnswer: 4
}];
var questionCounter = 0; //Tracks question number
var selections = []; //Array containing user choices
var quiz = $('#quiz'); //Quiz div object
// Display initial question
displayNext();
// Click handler for the 'next' button
$('#next').on('click', function (e) {
e.preventDefault();
// Suspend click listener during fade animation
if(quiz.is(':animated')) {
return false;
}
choose();
// If no user selection, progress is stopped
if (isNaN(selections[questionCounter])) {
alert('Please make a selection!');
} else {
questionCounter++;
displayNext();
}
});
// Click handler for the 'prev' button
$('#prev').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
choose();
questionCounter--;
displayNext();
});
// Click handler for the 'Start Over' button
$('#start').on('click', function (e) {
e.preventDefault();
if(quiz.is(':animated')) {
return false;
}
questionCounter = 0;
selections = [];
displayNext();
$('#start').hide();
});
// Animates buttons on hover
$('.button').on('mouseenter', function() {
$(this).addClass('active');
});
$('.button').on('mouseleave', function() {
$(this).removeClass('active');
});
// Creates and returns the div that contains the questions and
// the answer selections
function createQuestionElement(index) {
var qElement = $('<div>', {
id: 'question'
});
var header = $('<h2>Question ' + (index + 1) + ':</h2>');
qElement.append(header);
var question = $('<p>').append(questions[index].question);
qElement.append(question);
var radioButtons = createRadios(index);
qElement.append(radioButtons);
return qElement;
}
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
// Reads the user selection and pushes the value to an array
function choose() {
selections[questionCounter] = +$('input[name="answer"]:checked').val();
}
// Displays next requested element
function displayNext() {
quiz.fadeOut(function() {
$('#question').remove();
if(questionCounter < questions.length){
var nextQuestion = createQuestionElement(questionCounter);
quiz.append(nextQuestion).fadeIn();
if (!(isNaN(selections[questionCounter]))) {
$('input[value='+selections[questionCounter]+']').prop('checked', true);
}
// Controls display of 'prev' button
if(questionCounter === 1){
$('#prev').show();
} else if(questionCounter === 0){
$('#prev').hide();
$('#next').show();
}
}else {
var scoreElem = displayScore();
quiz.append(scoreElem).fadeIn();
$('#next').hide();
$('#prev').hide();
$('#start').show();
}
});
}
// Computes score and returns a paragraph element to be displayed
function displayScore() {
var score = $('<p>',{id: 'question'});
var numCorrect = 0;
for (var i = 0; i < selections.length; i++) {
if (selections[i] === questions[i].correctAnswer) {
numCorrect++;
}
}
score.append('You got ' + numCorrect + ' questions out of ' +
questions.length + ' right!!!');
return score;
}
})();
你的問題是什麼？ –
對我來說很好：https://jsfiddle.net/edg5rqfo/它不適合你嗎？究竟發生了什麼？ – Clonkex
@UbiquitousDevelopers Javascript沒有輸入任何問題，所有顯示的內容都是一個小小的藍色框。 http://imgur.com/a/nuc6n < - 我看到了 –