If correct answer, body loads! Any ideas?

Question

Guys I can't find a way to do this on my website. I need something the covers the entire website (can be an div with black background or an image, whatever) and a question comes up before the body loads.

The person types the answer on an input and submit, if the answer is correct (the answer can be visible on html) then body loads, or the div with black background covering the page goes away, showing the website.

Anything that covers the website and only loads the body after typing a certain word. Can anybody help me? :(

We can help you if are struggling with some code, but we won't write it for you. How about you start looking for tutorials that do parts of what you want? When you get the little pieces working then you can put them together. — TheZ, Aug 16 '12 at 17:51
no need the code, just an idea of what codes should I use. I know I'll have to use an something on click for the answer... I just need a general idea about what using for this. thank you for your help — kathryn, Aug 16 '12 at 17:53
This wouldn't be hard at all to do, but keep in mind that it will be really, really easy to "hack". If somebody wants to see your page, all they have to do is use a little firebug magic to `display:none` away the "cover", and voila, they can see the page. — Phillip Schmidt, Aug 16 '12 at 17:53
@kathryn Well, the code really depends on the kind of security you want. Any javascript implementation will be relatively easy to circumvent but some ways are more bothersome than others. — TheZ, Aug 16 '12 at 17:55
no need to be secure at all :) anything that makes the trick will do. thank you very much guys! — kathryn, Aug 16 '12 at 18:04

jbabey · Answer 1 · 2012-08-16T17:58:17.233

1

You tagged this question with jQuery, so I am going to suggest a jQuery dialog with modal=true.

See the example of a modal form on jQuery's site. You would open the dialog from a $(document).ready block, and only close it if the user enters the correct value in the form.

Keep in mind that anything you come up with can be bypassed by a user who knows how to use a browser's developer toolbar.

edited Aug 16 '12 at 17:58

answered Aug 16 '12 at 17:52

jbabey

45,965
12
71
94

@TheZ it's javascript. the user could simply turn off javascript and bypass any possible solution you could think of. – jbabey Aug 16 '12 at 17:55
@TheZ the body has to exist, you can't conditionally create the body, the browser does it for you if one doesn't exist. – Kevin B Aug 16 '12 at 17:55
@jbabey Not so, an ajax solution is javascript, so by disabling it you would never fetch the content. That's besides the point, a real implementation would be serverside code and that would not be so easily defeated. – TheZ Aug 16 '12 at 17:57
@KevinB javascript can run in the head of the document before the body is ever parsed. And no, creating it conditionally is silly, but attaching an onload event _only if_ a dialog is answered correctly is possible. – TheZ Aug 16 '12 at 17:59
@TheZ the user could just make the ajax call manually through the script console. long story short - it needs to be server side if it really needs to be secure. in this case, it did not sound like the OP needed it to be secure. – jbabey Aug 16 '12 at 18:00

score 1 · Answer 2 · answered Aug 16 '12 at 17:55

1

Well, I think you need use a server side script to do something like it...
For example validating the answer using php, asp, python, etc.

answered Aug 16 '12 at 17:55

chespinoza

2,638
1
23
46

Hey Chris, I don't know how to code php/asp/python , just jquery, javascript, html, hmtl and xml basics. Thank you for your help! – kathryn Aug 16 '12 at 18:22

score 1 · Answer 3 · answered Aug 16 '12 at 18:01

1

make a HTML page with the question you want to ask or anything else you want.

set a submit button with an action to a servlet, and when the user will hit the submit button after answering your question, you'll check in the servlet if the answer is true, with the request.getParameter
and you'll set a URL to the first page of your website,
and if it's false you'll set the URL to the first page he was...

answered Aug 16 '12 at 18:01

Elye M.

2,667
4
30
43

that would be beautiful if I did know how to set up a servlet :S but thank you so much for your help! – kathryn Aug 16 '12 at 18:20
do you know some java? if so its nothing. do you need help? – Elye M. Aug 16 '12 at 18:58
so Elye, I know a bit. I thought about something like: but it doesn't work :/ – kathryn Aug 16 '12 at 19:07
I'm not so good in java script, I'm talking form "java", but if you don't have a problem the user should be able to open the source and look up the password(do you know you could see all the code from the client side in the browser??) so go and try it.but i think you should take a few minutes and try to id on the server site... – Elye M. Aug 16 '12 at 19:14

score 0 · Answer 4 · answered Aug 16 '12 at 17:53

0

You could hide the rest of the body (enclosed in a div) using display: none and change that attribute should the answer be correct.

Using a modal is another option, using jQueryUI in the $(function(){}) or document.ready blocks.

answered Aug 16 '12 at 17:53

HenryZhang

1,318
8
11

1

If the body is display: none, anything within it (such as a modal dialog) will also be hidden. – Kevin B Aug 16 '12 at 17:54
@KevinB My bad, I meant to hide the rest of the body (main div). Changed. – HenryZhang Aug 16 '12 at 17:57

score 0 · Answer 5 · answered Aug 16 '12 at 17:54

0

Don't think of it as preventing the body from loading and then allowing it after the person types in an answer. Start with two <div>s, one that contains the question and one that contains the body content. Hide the "body" div initially and display it after the user answers the question.

Your question will be within the body tag so it doesn't make sense for you to ever hide then entire body.

answered Aug 16 '12 at 17:54

Cecchi

1,525
9
9

Hey Cecchi, I'm sorry but what kind of code should I use to detect the right answer and if correct, shows the body div? – kathryn Aug 16 '12 at 18:10
I don't know how to code php/asp/python so I thought about something like this: but then again, this code could be 100% wrong – kathryn Aug 16 '12 at 18:19
So you're doing a password protected page? This is a whole other question entirely as it involves security, and the verification will have to happen on the server side, probably using one of those languages you say you don't know. If you put the password in the client-facing javascript the user can simply look at the source of the page to find the login details. – Cecchi Aug 16 '12 at 19:00
Yes, but it's not meant to be secure at all. I just need this to work with a correct answer and login is all I can think about – kathryn Aug 16 '12 at 19:06
Well in that case you are more or less on the correct track with your previous comment, but `show()` is not a real javascript function. You'll have to change the style of the element, in particular it's display style property. Something like `yourdiv.style.display = 'block'` or `otherdiv.style.display = 'none'`... Googling how to hide and show elements with JavaScript should get you where you need to be. – Cecchi Aug 16 '12 at 20:38

score 0 · Accepted Answer · edited May 23 '17 at 12:04

See http://jsfiddle.net/AMVA3/

You can add the following code to the <head>, so it will be executed before the <body> is loaded:

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('<!--');
    }
}

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.

Note: I have taken the codes that stops document's loading from How to stop page load in html static page

Edit:

If you want to alert "wrong answer!", just add it after checking if it's wrong.

See it here: http://jsfiddle.net/AMVA3/1/

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('<!--');
    }
}

Edit 2:

It's weird that the previous code's alert doesn't work for you. For me it works.

But if you want to avoid loading only a div, you can use comments.

See it here: http://jsfiddle.net/AMVA3/3/

HTML:

<div class="a">
    You should se me
</div>
<div id="cover"></div>
<script type="text/javascript">
var wrongAnswer=prompt('Write answer here:',"answer")!="answer";
document.getElementById('cover').style.display='none';
if(wrongAnswer){
    alert("Wrong answer!!");
    document.write('<!--');
}
</script>
<div class="a hide">
    If you see me, you have written the right answer!
</div>
<script type="text/javascript">
if(!wrongAnswer){
    document.write('<!-- ');
}
</script>
-->
<div class="a">
    You should see me too
</div>

CSS:

#cover{position:fixed;top:0;left:0;height:100%;width:100%;
    background:yellow;/* Set it to the color that you want */
}

Oh my God, I love you!! It works!! Is there a way I can add alert("wrong answer!") along with the document.execCommand('Stop'); ? Thank you a million times!!! — kathryn, Aug 16 '12 at 21:27
Hey Oriol, I think the alert didn't work :/ but do you think would be possible to isolate this function to a div? Instead of not loading the page, it wouldn't load the div? I don't even know how to thank you enough!!! — kathryn, Aug 16 '12 at 21:49
I can't tell you how much I'm thankful to you Oriol, if I had an international credit card, I'd pay you for all this help. If I can help you on anything, please don't hesitate to contact me! You saved me!!! Thank you thank you thank you! — kathryn, Aug 17 '12 at 00:28

If correct answer, body loads! Any ideas?

6 Answers6