diff --git a/index.html b/index.html index 711f0c9..8256952 100644 --- a/index.html +++ b/index.html @@ -24,16 +24,47 @@ - Privacy Rating + Stairway Quiz + + -

Privacy Rating


-

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

-

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 (Grade S) to very bad (Grade F).

-

Privacy Rating attemps to warn you about bad software, services and practices in order to protect your privacy online.

-

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.

-

Once you are ready to start, click on the button below.

- +
+

Stairway Quiz


+ +

Stairway Quiz results range from excellent (Grade S) to very bad (Grade F).

+

This service does not track you, and your answers are not sent to our servers. You can also self-host Stairway.js.

+

Once you are ready to start, click on the button below.

+ +
+

Stairway.js is released under the GNU General Public License version 3 or later, by luca0N!

+

luca0N! does not endorse all quizzes created for Stairway.js and may not own copyrights on the current quiz.

+
diff --git a/res/Stairway-js.css b/res/Stairway-js.css index dba8adf..d24ca1a 100644 --- a/res/Stairway-js.css +++ b/res/Stairway-js.css @@ -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 { diff --git a/res/js/main.js b/res/js/main.js index 52efd40..f4c4784 100644 --- a/res/js/main.js +++ b/res/js/main.js @@ -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'; diff --git a/sample.en.json b/sample.en.json new file mode 100644 index 0000000..80bb646 --- /dev/null +++ b/sample.en.json @@ -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." + } + } +} diff --git a/session.html b/session.html index f78fb27..da127e8 100644 --- a/session.html +++ b/session.html @@ -24,9 +24,11 @@ - Privacy Rating + Stairway Quiz + + @@ -34,63 +36,36 @@ -

Privacy Rating


-

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

-

Loading quiz...

+
+

Stairway Quiz


+

It looks like your browser is configured to block JavaScript. We're sorry, but this page requires JavaScript in order to function.

+

Loading quiz...

-

Unknown quiz

-

Unknown author

-
-

Your privacy grade is:

- Grade S - Grade A - Grade B - Grade C - Grade D - Grade E - Grade F +

Unknown quiz

+

Unknown author

+
+

Your grade is:

+ Grade S + Grade A + Grade B + Grade C + Grade D + Grade E + Grade F -

-

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.

-

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.

-

Your Privacy Report

- The good, bad and ugly -
-
- +

Your Report

+ The good, bad and ugly +
+
+
+
+
+

Stairway.js is released under the GNU General Public License version 3 or later, by luca0N!

+

luca0N! does not endorse all quizzes created for Stairway.js and may not own copyrights on the current quiz.

-
- -
-

Released under the GNU General Public License version 3 or later, by luca0N!