Added hint system where student can choose difficulty

static/js/quiz.js

@@ -31,6 +31,30 @@ $(function() {
 
     // Hints
     $('.hint').replaceWith(function() {
-        return '<div><a href="#" onclick="$(this).next().slideToggle(); return false;">Bekijk hint</a>'+$(this).hide()[0].outerHTML+'</div>';
+        return '<div><a href="#" class="hintlink" onclick="$(this).next().slideToggle(); return false;">Bekijk hint</a>'+$(this).hide()[0].outerHTML+'</div>';
     });
+
+    $('#difficulty').change(function(e) {
+        var option = $(this).find(':selected').val();
+
+
+        $('.hintlink').toggle(option == 'normal');
+        $('.hint').toggle(option == 'easy');
+
+
+        window.localStorage.setItem('difficulty', option);
+    });
+
+    // Set the selected property
+    if(window.localStorage['difficulty']) {
+        var difficulty = window.localStorage['difficulty'];
+    } else {
+        var difficulty = 'normal';
+    }
+
+    $('#difficulty option').filter(function() {
+        return $(this).val() == difficulty;
+    }).prop('selected', true);
+    $('#difficulty').trigger('change');
+
 });

templates/base.html

@@ -23,6 +23,13 @@
             <li><a href="/wachtwoorden">Wachtwoorden</a></li>
           </ul>
 
+          Moeilijkheidsgraad:
+          <select id="difficulty">
+            <option value="easy">Makkelijk (hints zichtbaar)</option>
+            <option value="normal">Normaal (hints optioneel)</option>
+            <option value="hard">Moeilijk (geen hints)</option>
+          </select>
+
           <a href="/logout" class="btn">Uitloggen</a>
           <button class="btn-primary" type="submit" id="save-button">Opslaan</button>
           <div class="alert alert-info" id="js-message" style="display: none;"></div>

templates/path.html

@@ -52,7 +52,7 @@
 
       <p>Verander de bestandsnaam in image_remove_traversal.php (<a href="https://github.com/Avans/Security-Workshop/blob/master/image/image_remove_traversal.php">source</a>) , dit script heeft nu een beveiliging die alle '../' uit de string verwijderd zodat je niet meer ../ in de URL kan gebruiken.</p>
 
-      <p class="hint">Weet je nog hoe je deze beveiliging ongedaan hebt gemaakt bij die website die alle SELECT en UNION uit de URL filterde?</p>
+      <p class="hint"><strong>Hint:</strong> Weet je nog hoe je deze beveiliging ongedaan hebt gemaakt bij die website die alle SELECT en UNION uit de URL filterde?</p>
 
       <div class="question">
         <span class="question-string">Met welke URL kan je via het image_remove_traversal.php script de inhoud van /etc/geheim.txt uitlezen?</span>
@@ -74,9 +74,9 @@
 
       <p>Ga naar "Image 3". imgr heeft hun site uitgebreid met extra pagina's (<a href="https://github.com/Avans/Security-Workshop/blob/master/image/index_more_pages.php">source</a>). De afbeeldingen hebben ze maar weggehaald omdat daar teveel security problemen mee waren.</p>
 
-      <p class="hint">imgr zijn bezig met het maken van een inlogpagina en een registreren pagina.</p>
+      <p class="hint"><strong>Hint:</strong> imgr zijn bezig met het maken van een inlogpagina en een registreren pagina.</p>
 
-      <p class="hint">Heb je de broncode al bekeken? Die regel met <code>include()</code> ziet er interessant uit...</p>
+      <p class="hint"><strong>Hint:</strong> Heb je de broncode al bekeken? Die regel met <code>include()</code> ziet er interessant uit...</p>
 
       <div class="question">
         <span class="question-string">Beschrijf hoe je met deze site de inhoud van /etc/geheim.txt kan achterhalen</span>