gamal444 Posted April 25, 2008 Share Posted April 25, 2008 hi every bodyi wanna make an active page for learning englishi wanna put a space between two words and make the visitors try to put the right word if the word is correct a message appears that right answer and if wrong message appears try again<script type="text/javascript">function getElements() { var e=document.getElementsByTagName("input"); if (e[0].value == "is") alert("right"); else alert("plz try again"); }</script> that what i do with that idea to put "is: in free spacethis my carcan u help me to complete and how i do more than word?thanks alot Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2008 Share Posted April 25, 2008 The easiest thing would be to have three text inputs in a row. The first and third would contain values set by you. You can also use CSS to change their appearance, make them read-only or disabled, take away the border, change the background-color, etc. The second input would be for the user. Give every input a unique id.In your javascript, DON'T get the inputs by tag name. Get them by id. That way you'll be sure to get the correct one. Link to comment Share on other sites More sharing options...
gamal444 Posted April 25, 2008 Author Share Posted April 25, 2008 friend can u make it clear for me by exampl plz cuse i am bignner Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2008 Share Posted April 25, 2008 The board isn't very busy today, so I hacked out a pretty thorough example. Please try to learn from it. If there are parts you don't understand, quote them and ask what they do. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title></title> <style type="text/css"> * {font-family: Verdana, Arial, sans-serif; font-size: 1em;} html, body {margin: 0 auto; text-align: center;} #holder {background-color: #ff4411; height: auto; padding: 1em} #txt0, #txt2 {border-color: transparent; background-color: transparent;} #txt0 {text-align: right;} #txt1 {text-align: center; width: 3em;} </style> <script type="text/javascript"> function $(i) { return document.getElementById(i); } var sentences = []; sentences[0] = ["The boy", "is", "happy."]; sentences[1] = ["The girls", "are", "asleep."]; sentences[2] = ["Milk", "is", "good."]; var index = -1; function increment() { index++; $("txt0").value = sentences[index][0]; $("txt1").value = ""; $("txt2").value = sentences[index][2]; } function check() { if ($("txt1").value == sentences[index][1]) { alert ("Correct!"); } else { alert ("Sorry."); } } window.onload = increment; </script> </head> <body> <div id="holder"> <input type="text" id="txt0"> <input type="text" id="txt1"> <input type="text" id="txt2"> <button onclick="check()">Check answer</button> <button onclick="increment()">Next</button> </div> </body></html> Link to comment Share on other sites More sharing options...
gamal444 Posted April 26, 2008 Author Share Posted April 26, 2008 Excellent friendit works 100% thank you alotbut i wanna to make things beside it and i wonder if it allow or notcan i make a text not just scentence, and can i make a counter to clear to vistor how much he wrong and right to make vistor improve him self in next time?and if i have alarge amount of texts, is there any way to make that autmatic not manualy or make hidden text radomand again thanks alot my friend Link to comment Share on other sites More sharing options...
jeffman Posted April 26, 2008 Share Posted April 26, 2008 Yes, yes, yes. All those things can be done. And with time and patience your Javascript skills will improve enough that you can make them happen. Good luck! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.