Skip to content

Instantly share code, notes, and snippets.

@Estherns

Estherns/index.html

Created April 12, 2019 12:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Estherns/f4159d0de90eb399ebfae5caf7b257f5 to your computer and use it in GitHub Desktop.
Save Estherns/f4159d0de90eb399ebfae5caf7b257f5 to your computer and use it in GitHub Desktop.
Download ZIP
Simple quiz program
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Going To RC?</title>
<link href ="style.css" rel ="stylesheet">
</head>
<body>
<h1> Welcome to RC retreat self-evaluation quiz</h1>
<form id = "quiz" name = "quiz">
<h2>Here is a simple quiz to guide you,and eventually know if RC is for you or not.</h2>
<p class = "questions">Do you enjoy programming?</p>
<input type = "radio" id = "mc" name = "question1" value = "Yes"> Yes<br>
<input type = "radio" id = "mc" name = "question1" value = "Somehow"> Somehow<br>
<input type = "radio" id = "mc" name = "question1" value = "No"> No<br>
<p class = "questions">How independent are you to work on yourself?</p>
<input type = "radio" id = "mc" name = "question2" value = "Average"> Average<br>
<input type = "radio" id = "mc" name = "question2" value = "Very independent"> Very indipendent<br>
<input type = "radio" id = "mc" name = "question2" value = "Not sure"> Not sure<br>
<p class = "questions">Do you want to work on improving yourself with a dedicated community?</p>
<input type = "radio" id = "mc" name = "question3" value = "Oh, yes I like learning"> Oh, yes I like learning<br>
<input type = "radio" id = "mc" name = "question3" value = "I am a code guru already"> I am a code guru already!<br>
<input type = "radio" id = "mc" name = "question3" value = "I don't like communities"> I don't like communities<br>
<p class = "questions">Are you self-directed?</p>
<input type = "radio" id = "mc" name = "question4" value = "Somehow"> Somehow<br>
<input type = "radio" id = "mc" name = "question4" value = "Absolutely yes"> Absolutely yes<br>
<input type = "radio" id = "mc" name = "question4" value = "I need supervision"> I need supervision<br>
<p class = "questions">How sharp are you?</p>
<input type = "radio" id = "mc" name = "question5" value = "Average"> Average<br>
<input type = "radio" id = "mc" name = "question5" value = "Very sharp"> Very sharp<br>
<input type = "radio" id = "mc" name = "question5" value = "Not sure"> Not sure<br>
<p class = "questions">Are you intellectually curious?</p>
<input type = "radio" id = "mc" name = "question6" value = "No"> No<br>
<input type = "radio" id = "mc" name = "question6" value = "Somehow"> Somehow<br>
<input type = "radio" id = "mc" name = "question6" value = "Yes I am"> Yes I am<br>
<p class = "questions">Are you friendly?</p>
<input type = "radio" id = "mc" name = "question7" value = "Not friendly"> Not friendly<br>
<input type = "radio" id = "mc" name = "question7" value = "Not sure"> Not sure<br>
<input type = "radio" id = "mc" name = "question7" value = "Very friendly"> Very friendly<br>
<input id = "button" type = "button" value = "Evaluate me!" onclick = "check();">
</form>
<div id = "results">
<p id = "number_correct"></p>
<p id = "message"></p>
<img id = "picture">
</div>
<script src ="script.js" > </script>
</body>
</html>
Raw
script.js
function check(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var question4 = document.quiz.question4.value;
var question5 = document.quiz.question5.value;
var question6 = document.quiz.question6.value;
var question7 = document.quiz.question7.value;
var correct = 0;
if (question1 == "Yes") {
correct++;
}
if (question2 == "Very independent") {
correct++;
}
if (question3 == "Oh, yes I like learning") {
correct++;
}
if (question4 == "Absolutely yes") {
correct++;
}
if (question5 == "Very sharp") {
correct++;
}
if (question6 == "Yes I am") {
correct++;
}
if (question7 == "Very friendly") {
correct++;
}
var pictures = ["images/thumbsup.png", "images/code.jpg", "images/thumbdown.jpg"];
var messages = ["Congrats! You qualify to apply for RC retreat!", "You've tried, try to apply next time!", "Oh, sorry I don't think RC is for you!"];
var score;
if (correct == 0 && correct < 3) {
score = 2;
}
if (correct > 3 && correct < 7) {
score = 1;
}
if (correct == 7) {
score = 0;
}
document.getElementById("results").style.visibility = "visible";
document.getElementById("message").innerHTML = messages[score];
document.getElementById("number_correct").innerHTML = "You got " + correct + " questions correct!";
document.getElementById("picture").src = pictures[score];
}
Raw
style.css
body{
font-size: 20px;
font-family: 'Arial;
color: #030303;
font-weight: 300;
text-align: left;
padding: 10px 20px 10px 20px;
width: 850px;
float: left;
}
#quiz {
margin-left: 10px;
background: #07F99A;
padding: 10px 20px 10px 20px;
width: 500px;
border-radius: 25px;
float: left;
}
h1{
font-weight: 400;
padding: 10px;
border-radius: 50px;
font-size: 24px;
background-color: #02942E;
color: #fff;
text-align: center;
}
h2{
font-weight: 300;
padding: 10px;
border-radius: 50px;
font-size: 20px;
color: #030303;
text-align: left;
}
#button {
background-color: #02942E;
color: #fff;
border: 0px;
border-radius: 25px;
border: none;
padding: 10px;
font-size: 16px;
transition-duration: .5s;
margin-top: 15px;
}
#button:hover {
background: #EF03CB;
border: 1px #fff;
color: #fff;
cursor: pointer;
}
#results {
visibility: hidden;
background: #02942E;
padding: 10px 20px 10px 20px;
width: 200px;
border-radius: 20px;
float: left;
margin-left: 20px;
font-size: 30px;
}
#picture {
width: 200px;
height: 150px;
float: right;
}
button:hover{
background-color: #901A6C;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide{
opacity: 1;
z-index: 2;
}
#mc {
display: inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment