Created
March 25, 2020 19:15
-
-
Save claraj/a0c64819e0d7b79bf75a36a47a60db17 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- civicsQuiz--> | |
<!DOCTYPE html> | |
<lang=”en”> | |
<head> | |
<title> Civics Quiz </title> | |
<!--for bootstrap--> | |
<meta charset = “utf-8”> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> | |
<!-- also need Bootstrap's JavaScript libraries for the modal / dialog behavior --> | |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
</head> | |
<body class="m-3"> | |
<div class="modal fade" role="dialog" id="resultsModal" tabindex="-1" aria-labelledby="resultsModal" aria-hidden="true"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title"> | |
Results! | |
</h5> | |
</div> | |
<div class="modal-body"> | |
<!-- put the results here --> | |
<p>Your question results are....</p> | |
<p id="resultMessage"></p> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<button id="resultsCalculate" type="button" class="btn btn-primary" data-target="#resultsModal"> | |
Show modal once results are calculated!!</button> | |
<script> | |
document.querySelector('#resultsCalculate').addEventListener('click', function() { | |
let results = 'You scored 1000 out of 1000.' // todo figure out results, talk to server, whatever you need to do | |
let resultsModalTextEl = document.querySelector('#resultMessage') | |
resultsModalTextEl.innerHTML = results | |
$('#resultsModal').modal('show') // show the modal | |
/* | |
$ is a variable from the JQuery script included | |
JQuery is another library used by Bootstrap to do various things. | |
This line says find the thing with the id = resultsModal and call the modal('show') method on it | |
*/ | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment