0
我有一個tlc-quiz.html，f60-quiz.html，s93-quiz.html和一個quizapp.js，它檢查答案，獲得分數並顯示結果。它適用於tlc-quiz.html。如何在其他HTML文件中使用相同的JS文件？
如何讓quizapp.js與其他2個quiz.html一起工作？
/*====================app js====================*/
var numberOfQuestions = $('.questions').size();
// Insert number of choices in each question
var numberOfChoices = 4;
var rightAnswers = 0;
var correct = [];
var wrong =[];
var answers = new Array("Double Parking","The aplicant will have the aplication denied");
function buildList(arr) {
var listHTML = '<ol class=boxes-list>';
for (var i = 0; i < arr.length; i++) {
listHTML += '<li>' + arr[i] + '</li>';
}
listHTML += '</ol>';
return listHTML;
}
// Do not change anything below here ...
function getScore(form) {
var currElt;
var score = 0;
var currSelection;
for (i = 0; i < numberOfQuestions; i++) {
currElt = i * numberOfChoices;
for (j = 0; j < numberOfChoices; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
correct.push(currSelection.value);
} else{
wrong.push(currSelection.value);
}
}
}
}
score = Math.round(score/numberOfQuestions*100);
var userAnswers = '<h1 class="title">You got ' + score + ' % on your test.</h1>';
userAnswers += '<h2 class="subtitle">You got these answers correct:</h2>';
userAnswers += buildList(correct);
userAnswers += '<h2 class="subtitle">You got these answers wrong</h2>';
userAnswers += buildList(wrong);
print(userAnswers);
}
/*======================quizEffect app=====================*/
var totalQuestions = $('.questions').size();
var currentQuestion = 0;
$questions = $('.questions');
$questions.hide();
shuffle($questions);
$($questions.get(currentQuestion)).fadeIn();
$('#next').click(function() {
$($questions.get(currentQuestion)).fadeOut(function() {
currentQuestion = currentQuestion + 1;
progressBar();
questionCounter();
if (currentQuestion == totalQuestions) {
var outputDiv = document.getElementById("quizEnds");
outputDiv.innerHTML = '<h2 class="subtitle">Test Complete.</h2>';
$('#next').remove();
$('#slider').remove();
$('#questionCount').remove();
getScore($('form')[0]);
} else {
$($questions.get(currentQuestion)).fadeIn();
}
});
});
function progressBar(){
var barLength = totalQuestions;
var progress = currentQuestion;
var percentage = Math.round((progress*100)/barLength);
document.getElementById("sliderbar").style.width = percentage+'%';
document.getElementById("percentage").innerHTML = percentage+'%';
}
function questionCounter(){
document.getElementById("questionCount").innerHTML = (currentQuestion + 1 + "/" + totalQuestions);
}
function shuffle(array) {
var m = array.length, t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}c-custom {
padding: 0 .2em;
max-width: 900px;
margin: 0 auto;
}
/*.ac-custom */
.questions h2 {
/*color: #3399FF;*/
color: #18BC9C;
/*font-size: 2.4em;*/
font-size: 2em;
font-weight: 300;
/* padding: 0.5em;*/
margin: 0 0 30px;
}
.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}
.ac-custom li {
margin: 10px auto;
padding: 2em 0;
position: relative;
border: 1px solid #DDD;
border-radius: 10px;
}
.ac-custom li:hover {
background-color: #EBF4FA;
}
.ac-custom label {
display: inline-block;
position: relative;
/*font-size: 1.8em;*/
font-size: 1.25em;
padding: 0 0 0 80px;
vertical-align: top;
color: #666;
cursor: pointer;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
/*border: 4px solid #fff;*/
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ac-radio label::before {
border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
color: #18BC9C;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8;
}
/*end of clickable label*/
/*button, question counter, progress bar*/
/*#questionCount */
.questionCount{
text-align: center;
padding: 10px 0;
font-weight: 300;
font-size: 20px;
color: #2C3E50;
}
button{
border: none;
padding: 10px 20px;
background-color: #2C3E50;
color: #FFF;
font-size: 20px;
}
button:hover {
background-color: #18BC9C;
}
/*#slider*/
.slider{
width:100%;
height:15px;
border:1px solid #C2C2C2;
overflow:hidden;
text-align: center;
}
/*#sliderbar */
.sliderbar{
height:12px;
background: #2C3E50;
}
/*#percentage */
.percentage{
font-size: 15px;
font-weight: bold;
position: relative;
top: -16px;
color: #18BC9C;
}
/*test results*/
ol.boxes-list {
list-style-type: none;
margin: 10px;
margin-left: 3em;
padding: 0;
counter-reset: li-counter;
}
ol.boxes-list > li{
position: relative;
margin-bottom: 8px;
padding: .68em;
background-color: #ddd;
}
ol.boxes-list > li:before {
position: absolute;
top: 0;
left: -1.4em;
width: 1.2em;
height: 0.94em;
font-size: 2.5em;
line-height: 0.94;
text-align: center;
color: #f5f5f5;
background-color: #464646;
content: counter(li-counter);
counter-increment: li-counter;
}
/*Media Queries*/
@media only screen and (min-width: 1080){
form {
width: 80%;
margin: 0 auto;
}
.next, .questionCount, .progress_bar {
display: inline-block;
}
.bttn_bg {
width: 100%;
content: "";
clear: both;
display: table;
background-color: #DDD;
}
button {
margin: 8px;
float: right;
}
.questionCount {
/* float: left;*/
margin: 8px;
width: 67px;
}
.progress_bar{
width: 40%;
margin-left: 20%;
margin-bottom: -6px;
}
}
@media only screen and (min-width: 700px) and (max-width : 1080){
.next, .questionCount, .progress_bar {
display: block;
width: 90%;
margin: 10px auto;
}
}
@media only screen and (min-width: 300px) and (max-width : 700px) {
body{
font-size: 80%;
}
.questions, .ac-custom ul, .ac-custom ol{
width: 100%;
margin: 0;
}
.next, .questionCount, .progress_bar{
width: 90%;
display: block;
margin: 10px auto;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form class="ac-custom">
<div class="questions">
<h2>Which of the following is not a moving violation?</h2>
<ol class="options">
<li>
<input id="r1" type="radio" name="q1" value="Double Parking">
<label for="r1">Double Parking</label>
</li>
<li>
<input id="r2" type="radio" name="q1" value="Tailgating">
<label for="r2">Tailgating</label>
</li>
<li>
<input id="r3" type="radio" name="q1" value="Speeding">
<label for="r3">Speeding</label>
</li>
<li>
<input id="r4" type="radio" name="q1" value="Failing to signal a turn">
<label for="r4">Failing to signal a turn</label>
</li>
</ol>
</div>
<div class="questions">
<h2>What is the penalty for an aplicant of an TLC driver's license who test positive for drugs and fails the drug test?</h2>
<ol class="options">
<li>
<input id="r5" type="radio" name="q2" value="The aplicant must take the test again">
<label for="r5">The aplicant must take the test again</label>
</li>
<li>
<input id="r6" type="radio" name="q2" value="The aplicant will have a provationary license">
<label for="6r">The aplicant will have a provationary license</label>
</li>
<li>
<input id="r7" type="radio" name="q2" value="The aplicant will have the aplication denied">
<label for="r7">The aplicant will have the aplication denied</label>
</li>
<li>
<input id="r8" type="radio" name="q2" value="The aplicant will have to drive carefully">
<label for="r8">The aplicant will have to drive carefully</label>
</li>
</ol>
</div>
\t <div class="bttn_bg">
<div id="questionCount" class="questionCount">1/25</div>
<div class="progress_bar">
<div id="slider" class="slider" >
<div id="sliderbar" class="sliderbar"></div>
<div id="percentage" class="percentage"></div>
</div>
</div>
<button class="next" type="button" name="nextButton" id='next' value="Next">Next</button>
</div>
<form>
<div id="quizEnds"></div>
<div id="output"></div>
將腳本加載到其他頁面上，就像您爲此頁面所做的一樣。 – Searching
你的問題不清楚給我。如何在多個文件中包含相同的js？只需在每個html文件中使用sript標籤 –
包含它，如果問題是如何保留所有js實例，即保持全局變量的值不變。然後探索單頁應用程序 –