html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Quiz Masters V.2.0</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap and jQuery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Sweet alerts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<!-- Font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Imported font families -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<link rel="stylesheet" href="quiz.css" />
<script src="quiz.js"></script>
</head>
<body>
<!-- Container for the window -->
<header>
<img id="logo" src="http://citizenshipchallenge.ca/sites/default/files/Banner.png" alt="Logo"/>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
background: url("https://t4.ftcdn.net/jpg/00/70/91/81/160_F_70918195_adBxybJLVC11bW2siin0y539sl6NckX2.jpg");
background-size: 100% 550px;
background-repeat: repeat-y;
border: 4px solid red;
animation: border 3s alternate infinite;
margin: 0;
padding: 0;
}
@keyframes border {
20% {border: 4px solid red;}
40% {border:4px solid blue;}
60% {border: 4px solid green;}
100% {border:4px solid yellow;}
}
header {
background: repeating-linear-gradient(-45deg, gold, yellow, gold, gold 50px);
box-shadow: 0px 3px 4px blue;
padding: 0px 10px;
position: relative;
z-index: 1;
}
#logo {
width: 40%;
height: 60px;
position: absolute;
}
#name {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
alert("Welcome to Quiz Masters, a general knowledge (Bootstrap) quiz with 60 questions from 6 categories so far.\nI hope you enjoy and please comment for any bug or suggestion you have!\nThanks!");
$(function() {
/********************OOP**********************/
var pIndex = 0;
var index = 0;
var shuff = ["","","",""];
var ev;
function rand(arr) {
return arr[Math.floor(Math.random()*arr.length)];
}
//*****Creating Blueprint for questions******
function questions(prize, category, question, alt, hint, publicVote, fifty1, fifty2) {
this.prize = prize;
this.category = category;
this.question = question;
this.alt = alt;
this.hint = hint;
this.publicVote = publicVote;
this.fifty1 = fifty1;
this.fifty2 = fifty2;
//Method to print question and elements
this.addData = function addData() {
$("#prize").text(this.prize);
$("#category").text (this.category);
$("#question").text (this.question);
$("#prpr").text (this.prize);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run