Compare commits

...

10 Commits

Author SHA1 Message Date
luca0N! 1cce73db41
Add transition effect to box-shadow 2021-08-16 16:53:34 -03:00
luca0N! d3b2da856e
Change titles and messages
Change "Privacy Quiz" to "Stairway Quiz".
2021-06-02 19:31:15 -03:00
luca0N! 4379bbd6e5
Add sample quiz JSON file 2021-06-02 19:26:41 -03:00
luca0N! 0abc865113
Fix software license typo 2021-06-02 19:25:57 -03:00
luca0N! 4c5567a979
Add quiz ownership disclaimer 2021-06-02 19:14:41 -03:00
luca0N! d61a0fdce8
Add custom grade message
Remove hardcoded grade message and add support for custom grade messages.
2021-06-02 19:10:25 -03:00
luca0N! 4cf98ca23d
Fixed missing "}" 2021-06-02 18:28:18 -03:00
luca0N! e253939fb0
Updated style 2021-06-02 18:08:25 -03:00
luca0N! fd377ba8c0
Add meta tag to make pages resposive 2021-05-30 23:34:18 -03:00
luca0N! ccb7e51ef8
Add project information and LibreJS license on index page 2021-05-30 23:28:18 -03:00
5 changed files with 226 additions and 66 deletions

View File

@ -24,16 +24,47 @@
<html>
<head>
<meta charset="UTF-8"/>
<title>Privacy Rating</title>
<title>Stairway Quiz</title>
<link rel="stylesheet" type="text/css" href="res/Stairway-js.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
/*
@licstart The following is the entire license notice for the
JavaScript code in this page.
Copyright © 2021 luca0N!
The JavaScript code in this page is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this page.
*/
</script>
</head>
<body>
<h1>Privacy Rating</h1><hr/>
<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>Privacy Rating displays a form containing a few questions which are used to show a privacy grade based on your technology tasks, ranging from excellent (<span class="badge-small grade-s">Grade S</span>) to very bad (<span class="badge-small grade-f">Grade F</span>).</p>
<p>Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.</p>
<p>This service does not track you, and your answers are not sent to our servers. If you don't want to trust this instance, you can self-host it yourself.</p>
<div class="content">
<h1>Stairway Quiz</h1><hr/>
<!--<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>Stairway Quiz results range from excellent (<span class="badge-small grade-s">Grade S</span>) to very bad (<span class="badge-small grade-f">Grade F</span>).</p>
<p>This service does not track you, and your answers are not sent to our servers. You can also self-host Stairway.js.</p>
<p>Once you are ready to start, click on the button below.</p>
<button onclick="document.location = 'session.html'">Start!</button>
<hr/>
<p>Stairway.js is <a href="https://labs.luca0n.com/projects/stairway-js" target="_blank">released</a> under the <a href="https://git.luca0n.com/Stairway-js.git/tree/LICENSE" target="_blank">GNU General Public License version 3 or later</a>, by <a href="https://www.luca0n.com" target="_blank">luca0N!</a></p>
<p>luca0N! does not endorse all quizzes created for Stairway.js and may not own copyrights on the current quiz.</p>
</div>
</body>
</html>

View File

@ -27,6 +27,16 @@ html {
body {
margin-left: 15%;
margin-right: 15%;
margin-top: 0;
margin-bottom: 0;
background-color: #bfc0cd;
}
.content {
background-color: #fff;
padding: 24px;
box-shadow: 0 0 32px #0004;
}
#results {
@ -104,7 +114,14 @@ body {
margin-top: 32px;
margin-bottom: 32px;
padding: 15px;
border-style: dashed;
background-color: #feffea;
box-shadow: 0 0 12px #0004;
transition: box-shadow 0.1s;
}
.section-question:hover {
box-shadow: 0 0 18px #0008;
}
#warning {
@ -127,7 +144,24 @@ body {
.section-report {
margin-top: 12px;
padding: 15px;
border: solid;
box-shadow: 0 0 12px #0004;
}
.section-report-good {
background-color: #aaffaa;
}
.section-report-warning {
background-color: #ffa;
}
.section-report-bad {
background-color: #ffd79f;
}
.section-report-critical {
background-color: #fcc;
}
.advisory {
font-weight: bold;
}
.report-title {
@ -146,6 +180,7 @@ body {
background-color: yellow;
}
.report-bad {
color: white;
background-color: orange;
}
.report-critical {

View File

@ -41,7 +41,8 @@ function setUpStrings(){
let warning = document.getElementById('warning');
warning.style['display'] = 'unset';
// Get JSON file which contains all of the challenges required.
sendGetRequest('privacy-quiz.en.json', function(text){
// FIXME: remove hardcoded quiz name.
sendGetRequest('sample.en.json', function(text){
quiz = JSON.parse(text);
// Set up UI elements based on quiz metadata.
@ -160,7 +161,7 @@ function setUpStrings(){
let report = quiz.reports[choices[x][y]];
let reportEl = document.createElement('div');
reportEl.className = 'section-report';
reportEl.className = 'section-report section-report-' + report.type;
let title = document.createElement('p');
title.className = 'report-title';
@ -194,12 +195,32 @@ function setUpStrings(){
if (report.advisory != null && report.advisory != undefined){
let p = document.createElement('p');
p.innerText = report.advisory;
p.className = 'advisory';
reportEl.appendChild(p);
}
reports.appendChild(reportEl);
}
// Set the grade message (if it exists.
let gme = document.getElementById('grade-message'); // Grade Message Element
// Check if this quiz contains custom grade messages.
if (quiz.gradeMessages != undefined && quiz.gradeMessages != null){
let gmt, gmto = quiz.gradeMessages['grade-' + grade];
// Check if there is a grade message for the current grade.
if (gmto !== undefined && gmto !== null){
gmt = gmto.split('\n');
for (let i = 0; i < gmt.length; i++){
let line = gmt[i];
let p = document.createElement('p');
p.innerText = line;
gme.appendChild(p);
}
}
}
// Hide quiz and then show the results.
quizEl.style['display'] = 'none';
document.getElementById('results').style['display'] = 'unset';

98
sample.en.json Normal file
View File

@ -0,0 +1,98 @@
{
"title": "Sample Quiz",
"originalTimestamp": 1622672119,
"timestamp": -1,
"author": "luca0N!",
"contributors": [
"luca0N!"
],
"publisher": "luca0N!",
"license": "CC0",
"version": "v0.0-dev",
"revision": 1,
"format": "qrstd-1.0",
"globalSettings": {
"section.multiple.points.max": 10,
"section.multiple.points.min": -10
},
"threshold":{
"s.min": 10,
"a.min": 8,
"b.min": 4,
"c.min": 0,
"d.min": -3,
"e.min": -14,
"f.min": -24
},
"gradeMessages":{
"grade-s": "Congratulations! Your grade is Grade S.",
"grade-a": "Congratulations! Your grade is Grade A.",
"grade-b": "Congratulations! Your grade is Grade B.",
"grade-c": "Your grade is Grade C.",
"grade-d": "Your grade is Grade D.",
"grade-e": "Your grade is Grade E.",
"grade-f": "Your grade is Grade F."
},
"contents":[
{
"title": "This is a question with checkboxes.",
"type": "multiple",
"choices": [
"Choice 1 (Good)",
"Choice 2 (Warning)",
"Choice 3 (Bad)",
"Choice 4 (Critical)"
],
"ids": [
"choice-good", "choice-warning", "choice-bad", "choice-critical"
]
},
{
"title": "This is another question, but with radio buttons instead of checkboxes.",
"type": "single",
"choices": [
"Choice 1 (Good)",
"Choice 2 (Warning)",
"Choice 3 (Bad)",
"Choice 4 (Critical)"
],
"ids": [
"choice-good", "choice-warning", "choice-bad", "choice-critical"
]
}
],
"reports":{
"choice-good": {
"title": "You have picked a good choice",
"type": "good",
"points": 5,
"description": "This is the report description."
},
"choice-warning": {
"title": "You have picked a choice associated with a warning report",
"type": "warning",
"points": 0,
"description": "This is the report description.\nLine breaks will split paragraphs.",
"advisory": "This is the report advisory. Advisories are optional and can be used with all report types. Advisories are recommended for all report types, except good reports."
},
"choice-bad": {
"title": "You have picked a bad choice",
"type": "bad",
"points": -5,
"description": "This is the report description.",
"advisory": "This is the report advisory. Advisories are optional and can be used with all report types. Advisories are recommended for all report types, except good reports."
},
"choice-critical": {
"title": "You have picked a very bad choice",
"type": "critical",
"points": -8,
"description": "This is the report description.",
"advisory": "This is the report advisory. Advisories are optional and can be used with all report types. Advisories are recommended for all report types, except good reports."
}
}
}

View File

@ -24,9 +24,11 @@
<html>
<head>
<meta charset="UTF-8"/>
<title>Privacy Rating</title>
<title>Stairway Quiz</title>
<link rel="stylesheet" type="text/css" href="res/Stairway-js.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" type="text/javascript" src="res/js/main.js"></script>
@ -34,14 +36,15 @@
<script lang="javascript" type="text/javascript" src="res/js/js.js"></script>
</head>
<body>
<h1>Privacy Rating</h1><hr/>
<div class="content">
<h1>Stairway Quiz</h1><hr/>
<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">Unknown quiz</h2>
<p id="quiz-author">Unknown author</p>
<div id="results">
<center><p>Your privacy grade is:</p>
<center><p>Your grade is:</p>
<span id="badge-s" class="badge grade-s">Grade S</span>
<span id="badge-a" class="badge grade-a">Grade A</span>
<span id="badge-b" class="badge grade-b">Grade B</span>
@ -51,46 +54,18 @@
<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>
<div id="grade-message"></div>
<h2>Your Report</h2>
<i>The good, bad and ugly</i>
<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>
<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>
<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>-->
<hr/>
<p>Released under the GNU General Public License version 3 or later, by <a href="https://www.luca0n.com">luca0N!</a></p>
<p>Stairway.js is <a href="https://labs.luca0n.com/projects/stairway-js" target="_blank">released</a> under the <a href="https://git.luca0n.com/Stairway-js.git/tree/LICENSE" target="_blank">GNU General Public License version 3 or later</a>, by <a href="https://www.luca0n.com" target="_blank">luca0N!</a></p>
<p>luca0N! does not endorse all quizzes created for Stairway.js and may not own copyrights on the current quiz.</p>
</div>
</body>
</html>