Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>See <a href="http://jsfiddle.net/AMVA3/" rel="nofollow noreferrer">http://jsfiddle.net/AMVA3/</a></p> <p>You can add the following code to the <code>&lt;head&gt;</code>, so it will be executed before the <code>&lt;body&gt;</code> is loaded:</p> <pre><code>var ask=prompt('Write answer here:',"answer"); if(ask!="answer"){ //If the answer is wrong, we stop the document's loading if(window.stop){ window.stop(); }else if(document.execCommand){ document.execCommand('Stop'); }else{ document.write('&lt;!--'); } } </code></pre> <p>So, while you are asking the question, the page is only white because the body has not been loaded. If the answer is right, the document continues loading. If not, it stops loading.</p> <p>Note: I have taken the codes that stops document's loading from <a href="https://stackoverflow.com/questions/8943219/how-to-stop-page-load-in-html-static-page">How to stop page load in html static page</a></p> <p><strong>Edit:</strong></p> <p>If you want to alert "wrong answer!", just add it after checking if it's wrong.</p> <p>See it here: <a href="http://jsfiddle.net/AMVA3/1/" rel="nofollow noreferrer">http://jsfiddle.net/AMVA3/1/</a></p> <pre><code>var ask=prompt('Write answer here:',"answer"); if(ask!="answer"){ alert("Wrong answer!!"); if(window.stop){ window.stop(); }else if(document.execCommand){ document.execCommand('Stop'); }else{ document.write('&lt;!--'); } } </code></pre> <p><strong>Edit 2:</strong></p> <p>It's weird that the previous code's alert doesn't work for you. For me it works.</p> <p>But if you want to avoid loading only a div, you can use comments.</p> <p>See it here: <a href="http://jsfiddle.net/AMVA3/3/" rel="nofollow noreferrer">http://jsfiddle.net/AMVA3/3/</a></p> <p>HTML:</p> <pre><code>&lt;div class="a"&gt; You should se me &lt;/div&gt; &lt;div id="cover"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var wrongAnswer=prompt('Write answer here:',"answer")!="answer"; document.getElementById('cover').style.display='none'; if(wrongAnswer){ alert("Wrong answer!!"); document.write('&lt;!--'); } &lt;/script&gt; &lt;div class="a hide"&gt; If you see me, you have written the right answer! &lt;/div&gt; &lt;script type="text/javascript"&gt; if(!wrongAnswer){ document.write('&lt;!-- '); } &lt;/script&gt; --&gt; &lt;div class="a"&gt; You should see me too &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#cover{position:fixed;top:0;left:0;height:100%;width:100%; background:yellow;/* Set it to the color that you want */ } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload