Space_Quiz_App_Final created by sachdiksha - https://repl.it/@sachdiksha/SpaceQuizAppFinal

index.css

body {
	background: url(https://wallpapertag.com/wallpaper/full/9/4/d/155135-space-stars-background-1920x1080-smartphone.jpg);
	background-size: 100% 100vh;
	z-index: -1;
	margin: 0;
	padding: 0;
	
}





.header {
	font-family: 'Indie Flower', cursive;
	margin: 0 auto;
	text-align: center;
}

#quiz-form {
	/*height: 500px;*/
	width: 90%;
	max-width: 450px;
	background: rgba(255, 255, 255, 0.95);
	margin: 0 auto;
	border-radius: 25px;
	box-shadow: 0 0 50px 2px white;
	position: relative;
	font-family: 'Indie Flower';
	margin-top: 10px;
   position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.resetpos {

	width: 100%;
	height: 40px;
	margin-top: 15px;
	margin-bottom: 30px;
	bottom: 27px;
	border-radius: 25px;
	border: 2px solid white;
	background-color: black;
  color: white;
  font-size: 30px;
	font-family: Megrim;

	z-index: 99999;
}

.resetpos:hover {
	background-color: #5D4566;
	color: white;
}

#correctanswer {
	position: absolute;
	margin: 0 auto;
	text-align: center;
	bottom: 1px;
	left: 120px;
	font-size: 20px;
	color: green;
}

#submit {
	font-family: Megrim;
	font-size: 25px;
	height: 40px;
	width: 100%;
	margin: 0 auto;
border-radius: 20px;
	border: 2px solid white;
	background-color: #161616;
	color: white;
	z-index: 20;
	margin-top: 20px;
	margin-bottom: 20px;
}


#submit:hover {
	background-color: #5D4566;
}

#next {
	font-family: Megrim;
	font-size: 20px;
	height: 40px;
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 27px;
	margin: 0 auto;
	border-radius: 20px;
	border: 2px solid white;
	background-color: #161616;
	color: white;
	z-index: 19;
}

#next:hover {
	background-color: #5D4566;
}

#quizstat {
   word-wrap:break-word;
	text-align: center;
	font-family: Megrim;
	font-size: 40px;
}

.quizquestion {
	text-align: center;
	font-family: Indie Flower;
	font-size: 25px;
}

.option-input {


	margin-top: -5px;
}
.testing{
  font-size: 25px;
}

.answerList {
	margin-top: -8px;
	margin-left: 50px;

}

#startdiv {
word-wrap:break-word;
	width: 90%;
	max-width: 450px;
	background: rgba(255, 255, 255, 0.95);
	margin: 0 auto;
	border-radius: 25px;
	font-family: Megrim;
	font-size: 20px;
	box-shadow: 0 0 50px 2px white;
	margin-top: 10px;
   position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	
}

#startdiv h1 {
	text-align: center;
	margin-top: -20px;
}

#startquiz {
	color: white;
	font-family: Megrim;
	font-size: 25px;
	height: 40px;
	width: 40%;
	margin: 0 auto;
	border-radius: 20px;
	border: 2px solid black;
	background-color: #5D4566;
	display: block;
}

#startquiz:hover {
	color: black;
	background-color: white;
}

.quiz-info {
  font-family: Orbitron;
	font-size: 17px;
	text-align: center;
	padding-top: 20px;
	margin: 0 50px;
	padding-bottom: 20px;
}

.spacee {
	font-family: Bungee Shade;
	font-size: 2em;
}


#results p {
	padding-top: 10%;
}

#results {
	width: 60%;
	height: 60%;
	background: white;
	z-index: 3000;
	position: absolute;
	left: 20%;
	bottom: 20%;
	font-family: Indie Flower;
	font-size: 40px;
	text-align: center;
	border-width: 1px 1px 1px 1px;
	border-style: double;
	border-color: black;
	border-radius: 25px;
}


#force-choice {
  width: 80%;
	height: 50%;
	background-color: #AB8AA9;
	z-index: 3000;
	position: absolute;
  left: 10%;
	bottom: 20%;
	font-family: Indie Flower;
	font-size: 2em;
	text-align: center;
	border: 1px black;
	border-style: double;
	border-radius: 25px;
}

#forcechoicecloser{
  height: 20%;
  width: 40%;
  font-size: 20px;
  border: 1px solid black;
  

  font-family: Megrim;
  background-color: #161616;
  border: 2px solid white;
  color: white;
  border-radius: 20px;
}
#forcechoicecloser:hover{
  color: black;
  background-color: white;
  border-color: black;
}

.headerquiz {
	width: 100%;
	height: 50px;
	background-color: #827489;
	border-radius: 25px 25px 0 0;

	font-size: 30px;
	font-family: Comic Sans MS;
	border-bottom: 2px solid black;
	text-align: center;
}




#houstonWrong, #houstonRight{
  border: 1px solid black;
  border-radius: 25px;
  background-color: white;
  width: 70%;
  z-index: 99999;
  left:15%;
  position: absolute;
  bottom: 20%;
  box-shadow: 10px 40px 113px 10px rgba(0,0,0,1);
  margin-bottom: 10px;
}
.imgcontainer{
  text-align: center;
}
#houstonWrong img, #houstonRight img{
  margin-top: -10px;
  height: 60%;
  width:60%;
  border:1px solid black;
}
 #choiceAnsRight,#choiceAnsWrong{
   margin-top: -5px;
   font-size: 30px;
   text-align: center;
 }
 
#houstontext, #houstontext1{
  text-align: center;
  font-size: 20px;
}

#houstonWrong button, #houstonRight button{
margin-bottom: 30px;
border-radius: 25px;
width: 100px;
height: 30px;


background-color: black;
color:white;
font-family: Megrim;
font-size: 20px;
}
#closerdiv{
  width: 100%;
  text-align: center;
}
#houston button:hover, #houstonRight button:hover{
  background-color: #5D4566;
  color:white;
}
/* handling radio button effects */

@keyframes click-wave {
	0% {
		height: 40px;
		width: 40px;
		opacity: 0.35;
		position: relative;
	}
	100% {
		height: 200px;
		width: 200px;
		margin-left: -80px;
		margin-top: -80px;
		opacity: 0;
	}
}

.option-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	top: 13.33333px;
	right: 0;
	bottom: 0;
	left: 0;
	height: 40px;
	width: 40px;
	transition: all 0.15s ease-out 0s;
	background: #808FA1;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: 0.5rem;
	outline: none;
	position: relative;
	z-index: 1000;
	border-radius: 25px;
}

.option-input:hover {
	background: #9faab7;
}

.option-input:checked {
	background: #3B4C60;
}

.option-input:checked::before {
	height: 40px;
	width: 40px;
	position: absolute;
	content: '✔';
	display: inline-block;
	font-size: 26.66667px;
	text-align: center;
	line-height: 40px;
}

.option-input:checked::after {
	-webkit-animation: click-wave 0.65s;
	-moz-animation: click-wave 0.65s;
	animation: click-wave 0.65s;
	background: #3B4C60;
	content: '';
	display: block;
	position: relative;
	z-index: 100;
	border-radius: 100px;
}

.option-input.radio {
	border-radius: 50%;
}

.option-input.radio::after {
	border-radius: 50%;
}


/* mobile */
@media only screen and (max-width : 500px) {
 .headerquiz{
   font-size: 25px; 
   
 }
 .spantest{
   position: relative;
   padding-top: 10px;
 }
 #quizstat{
   font-size: 30px;
   margin:20px 0px;
 }
 .quizquestion{
   font-size: 23px;
 }
 .testing{
   font-size: 23px;
 }
}
 
 
 @media only screen and (max-width : 300px) {
  
   .headerquiz{
  font-size: 20px;
   }
 }
    @media only screen and (max-width : 300px) {
    
   .headerquiz{
     font-size: 18px;
   }
 }

index.html

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is a quiz that will test your knowledge on outer space.">
    <title>Space Quiz</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
     <script src="question.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="index.js"></script>
   
 
</head>

<body>

    <section id="startdiv" role="region">
       <div class="githublink">
        <a href="https://github.com/DikshaSach"><img style="position: relative; top: 0; left:0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a></div>
        <h1>What do you know about <span class='spacee'>space</span>?</h1>
        <div class="startquizhidingdiv"></div>
        <button id="startquiz" type='button'>Start</button>
        <div class="quiz-info">Find out how much you really know about our solar system!</div>
      </section>
 

    <form id='quiz-form' role='form'>
    <div class="headerquiz">
      <div class="spantest">
      <span class=headerquizspan>Quiz App | </span> 
      <span class="headerscore"></span></div>
      </div>
        <h2 id="quizstat"></h2>
        <div class="quizquestion"></div>
        <div class="answerList"></div>

        <button id="submit" type="button">Submit</button>
     
        <button id="reset" type="button">Wanna try again?</button>
        <!--- div's for displaying user feedback -->
        <div id="force-choice"><div>Did you forget to pick a choice first?</div>
        <button id="forcechoicecloser" type="button">Close</button>
        
        </div>
        <div id="results"> </div>
        
        <div id="houstonRight"><div id="choiceAnsRight"></div><div class="imgcontainer"><img src="https://memegenerator.net/img/instances/500x/59496131/houston-we-have-lift-off.jpg"><div id="houstontext1"></div>
        <div id="closerdiv"><button id="closer1" type="button">Close</button></div>
        </div></div>
        
        <div id="houstonWrong"><div id="choiceAnsWrong"></div><div class="imgcontainer"><img src="https://i2.wp.com/www.dailycrow.com/wp-content/uploads/2018/01/af868453c8ae1e885dc427937702a6d8.jpg?resize=938%2C558"><div id="houstontext"></div>
       <div id="closerdiv"> <button id="closer" type="button">Close</button></div>
        </div></div>
        
    </form>
    

</body>

</html>

index.js

// prevent form from being submitted
$('#quiz-form').on("click", function(e) {
    e.preventDefault();
});
// setting up variables
correctChoice = 0;
var currentQuestionNum = 0; // set to first question
var points = 0;
var totalQuestions = quizQuestions.length;
var forceChoice = null;
var results = null;
var houstonRight = null;
var houstonWrong = null;
var reset = null;

function onQuizStarted() {
  $('#startdiv').hide();
  $('#quiz-form').show();
}

function onQuestionSubmitted() {
  answervalue = $("input[type='radio']:checked").val();
  if (answervalue === undefined) {
      forceChoice.show();
      $('#forcechoicecloser').on('click', function(){
        forceChoice.hide();
      });
  } else {
      if (answervalue === quizQuestions[currentQuestionNum].correctChoice) {
          points++;

          displayScore();
          feedbackgiver();

          nextQuestion();
      } else {
          points === points;
          feedbackgiver();
          nextQuestion();
      }
  }
}

function nextQuestion() {
  if (currentQuestionNum + 1 < quizQuestions.length) {
      currentQuestionNum += 1;
      $('#submit').show();
  } else {
      quizover();
  }
}


function feedbackgiver() {
  var checkedRadio = $("input[type='radio']:checked")
  $('#submit').hide();
  answervalue = checkedRadio.val();
  var correct = quizQuestions[currentQuestionNum].correctChoice;
  var x = document.getElementsByTagName("label")
  if (answervalue === quizQuestions[currentQuestionNum].correctChoice) {
    console.log();
    houstonRight.show();
      checkedRadio.css("color", "green");
      console.log('Question:' + (currentQuestionNum + 1) + ' was Correct.');
      $('#choiceAnsRight').html('CORRECT');
      $('#houstontext1').html('Congrats you got it right!');
      $('#closer1').on('click', function(){
       displayQuestion();
       houstonRight.hide();
      });

  } else {
      
      checkedRadio.css("color", "red");
      console.log('Question:' + (currentQuestionNum + 1) + ' was incorrect.')
      houstonWrong.show();
      $('#choiceAnsWrong').html('WRONG');
      $('#houstontext').html('The correct choice was ' +quizQuestions[currentQuestionNum].answers[correct]);
      $('#closer').on('click', function(){
       displayQuestion();
        houstonWrong.hide();
      });
  }
}

function displayQuestion() {
  var question = quizQuestions[currentQuestionNum].question;
  var choiceAmt = quizQuestions[currentQuestionNum].answers.length;
  $('#quizstat').html(`Question ` + (currentQuestionNum + 1) + ` `);
  $('.quizquestion').text(question);

  $('.answerList').empty();
  var choice;
  for (var i = 0; i < choiceAmt; i++) {
      choice = quizQuestions[currentQuestionNum].answers[i];
      $(` <input type='radio' id="no${i}" name="ansbttns" value=` + i + ` class="option-input"><label for="no${i}" class="testing">` + choice +
          `</label><br/>`).appendTo('.answerList');
  }
}

function resetQuiz() {
  currentQuestionNum = 0;
  correctChoice = 0;
  points = 0;
  hideScore();
  $('#startdiv').show();
  $('#quiz-form').hide();
  displayQuestion();
  reset.hide();
  $("#submit").show();
  quizOver = false;
  displayScore();
}

function displayScore() {
  $('.headerscore').html(`Score: ` + points + `/10`);
}

function displayFinalScore() {
  results.html(`<p>Total Score:  <br>` + (points * 10) + `%</p>`);
  results.show();
  $('#quizquestion').hide();
  $('#answerList').hide()
}

function hideScore() {
   results.hide();
}

function quizover() {
  displayFinalScore();
  $("#submit").hide()
  reset.show().addClass('resetpos');
}
    
$(document).ready(function() {
    forceChoice = $('#force-choice');
    results =  $('#results');
    houstonRight = $('#houstonRight');
    houstonWrong = $('#houstonWrong');
    reset = $('#reset');
    
    results.hide();
    $('#force-choice').hide();
    $('#quiz-form').hide();
    displayQuestion();
    displayScore();
    reset.hide();
    resetQuiz();
    houstonWrong.hide(); 
    houstonRight.hide();
    
    $('#submit').on("click", onQuestionSubmitted);
    $('#startquiz').on('click', onQuizStarted);
    reset.on('click', resetQuiz);
});

question.js

const quizQuestions = [{
        question: 'What type of galaxy is the most common in the universe?',
        answers: ['Elliptical', 'Spiral', 'Irregular', 'Square'],
        correctChoice: '0'
    },

    {
        question: 'How old is the universe in light years? (Plus or minus 1 billion light years.)',
        answers: ['1 billion', '15 billion', '20 billion', '13.8 billion'],
        correctChoice: '3'
    },

    {
        question: 'How many planets are in the Solar System?',
        answers: ['0', '9', '10', '8'],
        correctChoice: '3'
    },
    {
        question: 'What is the largest planet in our solar system?',
        answers: ['Moon', 'Earth', 'Pluto', 'Jupiter'],
        correctChoice: '3'
    },
    {
        question: 'What is the smallest planet in our solar system?',
        answers: ['Mercury', 'Jupiter', 'Mars', 'Pluto'],
        correctChoice: '0'
    },
    {
        question: 'Which year was the first exoplanet discovered in?',
        answers: ['1996', '1994', '1995', '2018'],
        correctChoice: '2'
    },
    {
        question: 'What is the most common type of star found in the Milky Way?',
        answers: ['White dwarf', 'Red dwarf', 'yellow dwarf', 'Rainbow dwarf'],
        correctChoice: '1'
    },
    {
        question: 'What has a gravitational pull so strong that even light cannot escape it?',
        answers: ['Earth', 'Mars', 'A black hole', 'A star'],
        correctChoice: '2'
    },
    {
        question: 'Which NASA space flight was the last manned mission to the moon?',

        answers: ['Apollo 17', 'Oceans 13', 'Oceans 12', 'Oceans 11'],
        correctChoice: '0'
    },
    {
        question: 'Which way does Earth spin?',
        answers: ['From east to west', 'From west to east', 'From left to right', 'From up to down'],
        correctChoice: '1'
    }

];