Add report type span

res/Stairway-js.css

@@ -110,10 +110,10 @@ body {
 	border: solid;
 }
 
-.report {
+.report-title {
 	font-weight: bold;
 }
-.report-class {
+.report-type {
 	padding: 4px 4px 0px 4px;
 	text-shadow: 0 0 2px #0005;
 	box-shadow: 2px 2px 2px #0004;

res/js/main.js

@@ -149,6 +149,53 @@ function setUpStrings(){
 			// Display the grade X badge element (unset its 'none' display value)
 			document.getElementById('badge-' + grade).style['display'] = 'unset';
 
+			// Generate report elements.
+
+			for (let x = 0; x < choices.length; x++)
+				for (let y = 0; y < choices[x].length; y++){
+					let report = quiz.reports[choices[x][y]];
+
+					let reportEl = document.createElement('div');
+					reportEl.className = 'section-report';
+
+					let title = document.createElement('p');
+					title.className = 'report-title';
+
+					// Create the report type span.
+					let type = document.createElement('span');
+					// Make sure the first letter is uppercase.
+					let typeName = report.type[0].toUpperCase();
+					typeName += report.type.substring(1);
+					type.innerText = typeName;
+					type.className = 'report-type report-' + report.type;
+					title.append(type);
+
+					let titleSpan = document.createElement('span');
+					titleSpan.innerText = report.title;
+					title.appendChild(titleSpan);
+					reportEl.appendChild(title);
+
+					type.after(' '); // add a whitespace after this span so it doesn't look too close to the report title.
+
+					// For each line break in the report description,
+					// create a separate paragraph.
+					let paragraphs = report.description.split('\n');
+					for (let z = 0; z < paragraphs.length; z++){
+						let p = document.createElement('p');
+						p.innerText = paragraphs[z];
+						reportEl.appendChild(p);
+					}
+
+					// Add an advisory paragraph if it exists.
+					if (report.advisory != null && report.advisory != undefined){
+						let p = document.createElement('p');
+						p.innerText = report.advisory;
+						reportEl.appendChild(p);
+					}
+
+					document.getElementById('reports').appendChild(reportEl);
+				}
+
 			// Hide quiz and then show the results.
 			quizEl.style['display'] = 'none';
 			document.getElementById('results').style['display'] = 'unset';

session.html

@@ -42,20 +42,22 @@
 		<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 id="badge-s" class="badge grade-s">Grade S</span>
-					<span class="badge grade-a">Grade A</span><br/>
+				<span id="badge-a" class="badge grade-a">Grade A</span>
-					<span class="badge grade-b">Grade B</span><br/>
+				<span id="badge-b" class="badge grade-b">Grade B</span>
-					<span class="badge grade-c">Grade C</span><br/>
+				<span id="badge-c" class="badge grade-c">Grade C</span>
-					<span class="badge grade-d">Grade D</span><br/>-->
+				<span id="badge-d" class="badge grade-d">Grade D</span>
-					<span class="badge grade-e">Grade E</span><br/>
+				<span id="badge-e" class="badge grade-e">Grade E</span>
-					<!--<span class="badge grade-f">Grade F</span><br/>-->
+				<span id="badge-f" class="badge grade-f">Grade F</span>
 
 			</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">
+			<div id="reports">
+			</div>
+			<!--<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>
@@ -74,7 +76,7 @@
 				<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>
 		<div id="quiz"></div>