N0Lif3 Posted October 31, 2012 Share Posted October 31, 2012 I want to make a simple website-based program where you enter a word into the text input form and press enter, if that word is in the list of keywords that is hidden in the backside of the website, then you get a positive prompt saying you got a correct word and if you enter a word that isn't in my list of keywords then you get a negative prompt saying you didn't enter a correct word, then I'd like to add a third result for if you entered nothing at all and pressed enter. Example, let's say in my hidden list of keywords I have the words YELLOW, WHITE, and RED in there. If you go to the website and enter "WHITE," a word that is in my keyword list, you are prompted with a message saying it's in there If you go to the website and enter "APPLE," a word that isn't in my keyword list, you are prompted with a message saying that the word isn't in that list. I think Javascript would be the easiest way to do this. Also, how could I hide my keyword list so users snooping through the website couldn't find it? I'm not sure how to make such a javascipt program, I would love it if somebody could help me. It would be a great learning experience Link to comment Share on other sites More sharing options...
niche Posted October 31, 2012 Share Posted October 31, 2012 (edited) This will get you started. http://w3schools.com..._ajax_intro.asp It's not exactly what you need, but will familiarize you with the concepts you're talking about, but I does use php (which may be appropriate as your idea matures). Edited October 31, 2012 by niche Link to comment Share on other sites More sharing options...
N0Lif3 Posted October 31, 2012 Author Share Posted October 31, 2012 is there an easier, more simple way? Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2012 Share Posted October 31, 2012 In pure Javascript it's easy. But your list of words isn't exactly hidden. People can find it if they want to. First you have an onkeyup event handler. When the keyup event is fired you check that the keycode is 13. if(e.keycode == 13)If that's the case, just loop through a global array of keywords to see if any of them matches the value of the input field: var match = false;for(var i = 0; i < keywords.length; i++) { // The variable "element" is a reference to the text input if(element.value == keywords[i]) { match = true; break; }}if(match) { alert("Correct keyword");} else { alert("This is not a keyword");} 1 Link to comment Share on other sites More sharing options...
thescientist Posted October 31, 2012 Share Posted October 31, 2012 (edited) if you want to keep the answers hidden, you will have to use a server side language. The server side script can be very simple. Create an array of keywords, and then, if using PHP, just a simple if/else statement and the in_array method. Then you can use that to return a message to the callback function, which can then trigger the correct alert/prompt to the user. Edited October 31, 2012 by thescientist Link to comment Share on other sites More sharing options...
niche Posted October 31, 2012 Share Posted October 31, 2012 ... and that leads back to post #2 Link to comment Share on other sites More sharing options...
N0Lif3 Posted November 3, 2012 Author Share Posted November 3, 2012 Thanks for all the help and suggestions thus far, guys. I've been trying to implement Ingolme's script above, trying to mix it into other tutorial scripts I've found online, but I can't get it to work. I'm just bad at this. How do I make it work in html? Believe me, I've been trying to get it to work. <body><form> Enter your keyword guess here! </form><input type="text"><script> *Ingolme's script here* </script></body> Link to comment Share on other sites More sharing options...
thescientist Posted November 3, 2012 Share Posted November 3, 2012 you'll have to at least show your attempt at the script first. Link to comment Share on other sites More sharing options...
Ingolme Posted November 3, 2012 Share Posted November 3, 2012 There's a lot more than what I showed in my script. It's not going to work on its own. There are two variables in my code that I assumed were already set: element and e. The e variable is a result of Javascript's event handling. Explanation as to where it comes from and how to set it is here: http://www.quirksmod...nts_access.html You need to use DOM methods to make a reference to the <input> element, which should be stored in the element variable. You can also use the event object to find the element as shown here: http://www.quirksmode.org/js/events_properties.html#target I also assumed a keycode property, but it isn't a cross-browser solution, you can read about finding out which key was pressed here: http://www.quirksmod...erties.html#key Link to comment Share on other sites More sharing options...
N0Lif3 Posted November 3, 2012 Author Share Posted November 3, 2012 (edited) you'll have to at least show your attempt at the script first. Here's my honest attempt at it. <!DOCTYPE html><html><head><script>function myFunction() { //apple is the keycodevar 1 = text(apple);var x = document.getElementById("guesshere"); if (1) { function changeText(){ document.getElementById('guesshere').innerHTML = "correct"; } }else { function changeText(){ document.getElementById('guesshere').innerHTML = "incorrect"; } } }</script></head><body> enter keyword <input type="text" id="guesshere" onchange="myFunction()"><p>When you leave the input field, a function is triggered which transforms the input text to "correct" or "incorrect"</p> </body></html> edit: ^^^ the above code here doesn't work at all!edit 2: some of it I'm sure doesn't make sense, I'm just taking code here and there from tutorials and it's like my 5th or 6th go at it and I keep changing it around.edit 3: I do see that my "x" variable doesn't fit in here. I'm awful at this and I'm trying to think of a way to simplify as much as possible. A "1" should be the correct keyword. Anything that is the correct keyword should be a 1 in the backend. So if you guess correctly, 1 sends a "you are correct" message to x. "x" is the input box where you can put in any word. Man, I just don't know how to make this work, as simple as it should be. I just don't know what to do. Edited November 3, 2012 by N0Lif3 Link to comment Share on other sites More sharing options...
Ingolme Posted November 3, 2012 Share Posted November 3, 2012 OK. The first step you need to take is to actually learn Javascript. Copying code from different places without knowing how it works is going to lead to failure. W3Schools has a good Javascript tutorial to begin. To learn about event handling, visit the links from my previous post. You should also read W3Schools' HTML DOM tutorial. Link to comment Share on other sites More sharing options...
N0Lif3 Posted November 3, 2012 Author Share Posted November 3, 2012 (edited) Ok, I've some more reading and seriously put a lot of thought into it this time. This absolutely should work,. it makes sense to me, but it doesn't. What am I missing? This SHOULD work! <!DOCTYPE html><html><head><script> function myFunction() {var x="";var y=document.getElementById("guesshere").value;//apple is the keycode, one of many keycodes to comevar 1="apple"; if (y=1) { x="correct" }else { x="incorrect" }document.write(x); }</script></head><body> <input type='text' id='guesshere' value='Enter Text Here' /><input type='button' onclick='myFunction()' value='Submit'/> </body></html> Come on, it's elegant and simple. This should be flawless!edit: if I didn't make it clear, it doesn't work, but I think it should. Edited November 3, 2012 by N0Lif3 Link to comment Share on other sites More sharing options...
Ingolme Posted November 3, 2012 Share Posted November 3, 2012 var 1="apple"; 1 is a number, not a variable name. if (y=1) This line sets y to 1, if you read the tutorial page about if() you will see that == is used to compare, rather than the assignment operator, =. document.write(x); When used in this way, document.write() will erase all the content of the page and then write the new content. There are other ways to get information onto the page, like setting the text that's inside an HTML element. Link to comment Share on other sites More sharing options...
N0Lif3 Posted November 3, 2012 Author Share Posted November 3, 2012 (edited) Hazaa! I got it to work. I needed help to do it, but I'm quite proud of myself that I got a script to work now WORKING SCRIPT!!! <!DOCTYPE html><html><head><script> function myFunction() {var x="";var y=document.getElementById("guesshere").value;//apple is the keycode, one of many keycodes to comevar keycodes="apple"; if (y == keycodes) { x="correct" }else { x="incorrect" } document.write(x); }</script></head><body> <input type='text' id='guesshere' value='Enter Text Here' /><input type='button' onclick='myFunction()' value='Submit'/> </body></html> EDIT: I want to change two things. My next step is to change how it outputs the answer, so it displays below the input box without wiping the whole page. Second, is there a way I can make the "keycodes" variable look at a text file for all of the keycodes? Say, I have a text file with a 100 keycodes. Edited November 3, 2012 by N0Lif3 Link to comment Share on other sites More sharing options...
thescientist Posted November 5, 2012 Share Posted November 5, 2012 EDIT: I want to change two things. My next step is to change how it outputs the answer, so it displays below the input box without wiping the whole page.Ingolme already explained that here.When used in this way, document.write() will erase all the content of the page and then write the new content. There are other ways to get information onto the page, like setting the text that's inside an HTML element.You can use document.getElementById, similar to how you are using it now, to write to the innerHTML or value property of an element, depending on the type of element. Second, is there a way I can make the "keycodes" variable look at a text file for all of the keycodes? Say, I have a text file with a 100 keycodes.Yes. You could make an Ajax request to a file on your server to get the secret codes and check them after each guess. Still not as "secure" as using a server side script to obfuscate the answers, but better than embedding the codes directly into the current page. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now