Move results to session HTML page

res/js/main.js

@@ -25,6 +25,8 @@
  * by luca0N! <https://www.luca0n.com>
  */
 
+let quizEl;
+
 // Attach setUpStrings() to onReady() in order to execute the main code as soon as possible.  This overwrites onReady().
 onReady = setUpStrings;
 
@@ -50,7 +52,7 @@ function setUpStrings(){
 		quizAuthor.style['display'] = 'unset';
 
 		let contents = quiz.contents;
-		let elQuiz = document.getElementById('quiz'); // quiz div element.
+		quizEl = document.getElementById('quiz'); // quiz div element.
 
 		for (let x = 0; x < contents.length; x++){
 			//console.log(contents[x].title);
@@ -100,15 +102,17 @@ function setUpStrings(){
 
 			} else console.warn('Warning: unknown type "' + contents[x].type + '" for question #' + (x + 1));
 
-			elQuiz.appendChild(itemDiv);
+			quizEl.appendChild(itemDiv);
 		}
 		// Add the finish button.
 		let finish = document.createElement('button');
 		finish.innerText = 'Finish!';
 		finish.onclick = function(){
-			document.location = 'final.html';
+			// Hide quiz and then show the results.
+			quizEl.style['display'] = 'none';
+			document.getElementById('results').style['display'] = 'unset';
 		}
-		elQuiz.appendChild(finish);
+		quizEl.appendChild(finish);
 		warning.style['display'] = 'none';
 	});
 }

res/privacy-rating.css

@@ -25,6 +25,10 @@ body {
 	margin-right: 15%;
 }
 
+#results {
+	display: none;
+}
+
 .warning {
 	color: white;
 	background-color: orange;

session.html

@@ -29,7 +29,7 @@
 
 		<script lang="javascript" type="text/javascript" src="res/js/defs.js"></script>
 		<script lang="javascript" type="text/javascript" src="res/js/io.js"></script>
-		<script lang="javascript" src="res/js/main.js"></script>
+		<script lang="javascript" type="text/javascript" src="res/js/main.js"></script>
 
 		<script lang="javascript" type="text/javascript" src="res/js/js.js"></script>
 	</head>
@@ -38,21 +38,55 @@
 		<p class="warning" id="javascript-warning">It looks like your browser is configured to block JavaScript.  We're sorry, but this page requires JavaScript in order to function.</p>
 		<p class="warning" id="warning">Loading quiz...</p>
 
-		<h2 id="quiz-title">Quiz Title</h2>
+		<h2 id="quiz-title">Unknown quiz</h2>
-		<p id="quiz-author">Published by Author</p>
+		<p id="quiz-author">Unknown author</p>
+		<div id="results">
+			<center><p>And your privacy grade is:</p>
+				<!--<span class="badge grade-s">Grade S</span><br/>
+					<span class="badge grade-a">Grade A</span><br/>
+					<span class="badge grade-b">Grade B</span><br/>
+					<span class="badge grade-c">Grade C</span><br/>
+					<span class="badge grade-d">Grade D</span><br/>-->
+					<span class="badge grade-e">Grade E</span><br/>
+					<!--<span class="badge grade-f">Grade F</span><br/>-->
 
-		<div id="quiz">
+			</center><br/>
+			<p>Oh no, looks like you got a bad grade!  Unfortunately, many popular services do not respect your privacy, and you're likely using some of them.</p>
+			<p>But you can increase your privacy grade.  Do not be discouraged from performing good privacy practices because you can increase it drastically with little to no effort.</p>
+			<h2>Your Privacy Report</h2>
+			<i>The good, bad and ugly</i>
+			<div class="section-report">
+				<p class="report"><span title="This is a good report" class="report-class report-good">Good</span> This is a good report</p>
+				<p>This is the report description.</p>
+			</div>
+
+			<div class="section-report">
+				<p class="report"><span title="This report requires attention" class="report-class report-warning">Warning</span> This is a warning report</p>
+				<p>This is the report description.</p>
+				<p>Advisory: this is the report advisory.</p>
+			</div>
+			<div class="section-report">
+				<p class="report"><span title="This is a bad report" class="report-class report-bad">Bad</span> This is a bad report</p>
+				<p>This is the report description.</p>
+				<p>Advisory: this is the report advisory.</p>
+			</div>
+			<div class="section-report">
+				<p class="report"><span title="This is a very bad report" class="report-class report-critical">Critical</span> This is a critical report</p>
+				<p>This is the report description.</p>
+				<p>Advisory: this is the report advisory.</p>
+			</div>
 
 		</div>
+		<div id="quiz"></div>
 		<!--<p>The challenge has begun!  In order to find out your privacy grade, you must answer the questions in this form based on your technology use.  You may skip questions if you deem necessary.</p>
-		<p>Please wait - loading questions...</p>
+			<p>Please wait - loading questions...</p>
-		<div class="section-question">
+			<div class="section-question">
 			<p class="question">Q: What operating system is installed on your main computer?</p>
 			<input type="radio">Windows</input>
 			<input type="radio">macOS</input>
 			<input type="radio">Linux</input>
 			<input type="radio">BSD</input>
 			<input type="radio">Windows</input>
-		</div>-->
+			</div>-->
 	</body>
 </html>