/    Sign up×
Community /Pin to ProfileBookmark

Help, please! I beg you!

Hello, hello! I need some help with JavaScript … 😑

I’m doing a spanish project for school and I decided to write a page that stores the names of the terms (it’s a teaching tool) and the images of those terms in separate arrays. Then later in the document I put in an input where the visitor can type the name of the term when they recognize what the picture displayed represents.

So this is the format:

<picture>

Guess here: <input field> <submit information button>

When the button is pressed, I’m trying to get it to compare the information entered with the index of the picture that’s displayed. If it’s the same, then it alerts the user (Cierto!) and if it’s not, then it alerts the user (Falso!).

I’m having problems and it’s due Monday. I’m begging anyone who knows JS to help me … thanks.

Here’s my code (of course, the picture URL’s are different):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html>

<head>

<script type=”text/javascript”>
var element_names = new Array(7)
element_names[0] = “linea”
element_names[1] = “color”
element_names[2] = “valor”
element_names[3] = “figura”
element_names[4] = “textura”
element_names[5] = “forma”
element_names[6] = “espacio”
var element_imgs = new Array(7)
element_imgs[0] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
element_imgs[1] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
element_imgs[2] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
element_imgs[3] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
element_imgs[4] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
element_imgs[5] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
element_imgs[6] = “C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg”
function check()
{
x=document.input.guess
cierto=x.value.indexOf(switch(imgs))
if (cierto != switch(imgs))
{
alert(“Falso!”)

}
if (cierto == switch(imgs))
{
alert(“Cierto!”)
}
}
</script>

</head>

<body>

<script type=”text/javascript”>
var a=Math.random()*7
var b=(Math.round(a))
var imgs=b
switch (imgs)
{
case 0:
document.write(“<img src=element_imgs[0] />”)
break
case 1:
document.write(“<img src=element_imgs[1] />”)
break
case 2:
document.write(“<img src=element_imgs[2] />”)
break
case 3:
document.write(“<img src=element_imgs[3] />”)
break
case 4:
document.write(“<img src=element_imgs[4] />”)
break
case 5:
document.write(“<img src=element_imgs[5] />”)
break
case 6:
document.write(“<img src=element_imgs[6] />”)
break
}
</script>

Input guess here (remember that spelling counts, ignore accents):
<input type=”text” name=”guess” size=”20″>
<input type=”button” value=”Check!” onclick=”return check()” />

</body>

</html>

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_JrOct 09.2004 β€”Β [font=palatino linotype]Hi,

something like this?[/font]
[size=1]
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
var element_names = new Array(7)
element_names[0] = "linea"
element_names[1] = "color"
element_names[2] = "valor"
element_names[3] = "figura"
element_names[4] = "textura"
element_names[5] = "forma"
element_names[6] = "espacio"
var element_imgs = new Array(7)
element_imgs[0] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
element_imgs[1] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
element_imgs[2] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
element_imgs[3] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
element_imgs[4] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
element_imgs[5] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
element_imgs[6] = "C:Documents and SettingskidsMy DocumentsMy PicturesDeviantARTbridge.jpg"
function check() {
var choice = document.forms[0]['guess'];
if(choice.value == element_names[rand_num]) {
alert('Cierto!');
}
else {
alert('Falso!');
}
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;script type="text/javascript"&gt;
var rand_num = Math.round(Math.random() * (element_names.length - 1));
document.write('&lt;img src="' + element_imgs[rand_num] + '" id="rand_img"&gt;');
&lt;/script&gt;

&lt;form action="" onsubmit="return false"&gt;
&lt;div&gt;
&lt;label&gt;Input guess here (remember that spelling counts, ignore accents):
&lt;input type="text" name="guess" size="20" /&gt;
&lt;/label&gt;
&lt;input type="submit" value="Check!" onclick="check()" /&gt;
&lt;/div&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
[/size]
Copy linkTweet thisAlerts:
@ShokatauthorOct 09.2004 β€”Β I cannot express my gratitude to you, Paul Jr. It works, and I'm happy.

(Thankyouthankyouthankyouthankyouthankyouthankyou!!oneone!!1!eleven1!)

But if you don't mind, there are some things in this document that I do not understand:



<form action="" onsubmit="return false">

var rand_num = Math.round(Math.random() * (element_names.length - 1));

document.write('<img src="' + element_imgs[rand_num] + '" id="rand_img">');



If you'd be so kind as to explain these things to me, perhaps I'll be able to learn something about this, too. Sorry, but thanks so much, again.
Copy linkTweet thisAlerts:
@Paul_JrOct 09.2004 β€”Β [i]Originally posted by Shokat [/i]

[B]I cannot express my gratitude to you, Paul Jr. It works, and I'm happy.



(Thankyouthankyouthankyouthankyouthankyouthankyou!!oneone!!1!eleven1!)



But if you don't mind, there are some things in this document that I do not understand:[/b]
[/quote]

[font=palatino linotype]Happy to help. ?[/font]


<i>
</i>&lt;form action="" onsubmit="return false"&gt;

[font=palatino linotype]I noticed you were using an XHTML document type, and in XHTML the [font=courier]action[/font] attribute is required in forms. In this case we don&#8217;t actually want the form to go anywhere, so I left it empty (a hash mark, &#8220;#&#8221;, is also fine). The [font=courier]onsubmit="return false"[/font] bit makes sure that the form doesn&#8217;t submit if the user hits the enter key or clicks the submit button; we just want to execute some functions on the same page and not submit the form.[/font]

<i>
</i>var rand_num = Math.round(Math.random() * (element_names.length - 1));

[font=palatino linotype]That is basically what you had before, but condensed a little. The [font=courier]Math.random()[/font] function returns a number between 0 and 1. We multiply it by the length of the [font=courier]element_names[/font] array to get a random number between 0 and the length of the [font=courier]element_names[/font] array &#8212; in this case, 7. The [font=courier]Math.round()[/font] function makes sure the random number we get is a whole number.[/font]

<i>
</i>document.write('&lt;img src="' + element_imgs[rand_num] + '" id="rand_img"&gt;');

[font=palatino linotype]What this is doing is writing out the value of the array element whose index is equal to the random number. So if the random number is 1, then the value of the second array element will be written here (the second array element&#8217;s index is 1, since array indices start at 0). In this case the values are file paths to images, so the value is written out in the image&#8217;s [font=courier]src[/font] attribute, and the corresponding image id displayed.


If you have any more questions, feel free to ask. ?[/font]
Copy linkTweet thisAlerts:
@ShokatauthorOct 09.2004 β€”Β Alright! This man is my hero. Batman, indeed. I think I understand, at least, enough to grasp it. ?

But being the ignoramus that I am, I am wondering how I might implement a way that once a user gets the correct answer, the page (or image) refreshes and so does the correct-answer thing, but the image will not be the same.

The overall point of this is so a user can go there and can go through all of the terms once (like a test).

Goodness, thank you for all of the help thus far. Everything you have done is appreciated. ::worships::

Here's the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>



<head>


<script type="text/javascript">

var element_names = new Array(7)

element_names[0] = "linea"

element_names[1] = "color"

element_names[2] = "valor"

element_names[3] = "figura"

element_names[4] = "textura"

element_names[5] = "forma"

element_names[6] = "espacio"

var element_imgs = new Array(7)

element_imgs[0] = "http://www.freewebs.com/shokat/imgstore/linea.jpg"

element_imgs[1] = "http://www.freewebs.com/shokat/imgstore/color.jpg"

element_imgs[2] = "http://www.w3schools.com/images/w3default80.jpg"

element_imgs[3] = "http://www.w3schools.com/images/w3default80.jpg"

element_imgs[4] = "http://www.w3schools.com/images/w3default80.jpg"

element_imgs[5] = "http://www.w3schools.com/images/w3default80.jpg"

element_imgs[6] = "http://www.w3schools.com/images/w3default80.jpg"

function check()

{

var choice = document.forms[0]['guess'];

if (choice.value == element_names[rand_num])

{

alert('Cierto!');

}

else

{

alert('Falso!');

}

}

</script>


</head>



<body>


<script type="text/javascript">

var rand_num = Math.round(Math.random() * (element_names.length - 1));

document.write('<img src="' + element_imgs[rand_num] + '" id="rand_img">');

</script>

<form action="" onsubmit="return false">

<div>

<label>Input guess here (remember that spelling counts, ignore accents):

<input type="text" name="guess" size="20" />

</label>

<input type="submit" value="Check!" onclick="check()" />

</div>

</form>


</body>



</html>
Copy linkTweet thisAlerts:
@steelersfan88Oct 09.2004 β€”Β [i]Originally posted by Paul Jr[/i]

[b]var rand_num = Math.round(Math.random() * (element_names.length - 1));[/b][/quote]
I've always used ...var rand_num = Math.floor(Math.random() * (element_names.length));
Copy linkTweet thisAlerts:
@Paul_JrOct 10.2004 β€”Β [i]Originally posted by Shokat [/i]

[B]But being the ignoramus that I am, I am wondering how I might implement a way that once a user gets the correct answer, the page (or image) refreshes and so does the correct-answer thing, but the image will not be the same.



The overall point of this is so a user can go there and can go through all of the terms once (like a test).[/B]
[/QUOTE]

[font=palatino linotype]You would need some way of keeping track of which images were already shown and how many the user got right and how many he/she got wrong. A server-side language seems more appropriate for this, although it may be possible in JavaScript. However, this is where I get off; I dont&#8217;t believe I would be able to pull something like this off. There are, though, many people here who could. ?[/font]

[i]Originally posted by steelersfan88 [/i]

[B]I've always used ...var rand_num = Math.floor(Math.random() * (element_names.length)); [/B][/QUOTE]

[font=palatino linotype]Makes sense. I just did a quick look-up and I see [font=courier]Math.floor()[/font] is more appropriate. As for the subtracting one from the length of the array &#8212; I don&#8217;t believe that was necessary. My bad. :o [/font]
Copy linkTweet thisAlerts:
@steelersfan88Oct 10.2004 β€”Β I ran the loop as well, just to see. I didn't notice any unusually high or low numbers at the boundary though (just a bunch of 3s and 2s, but that is completely random i guess). This mistake most forget to make is to offset by -1. Otherwise, I guess either way is acceptable ...
Copy linkTweet thisAlerts:
@TageOct 10.2004 β€”Β EDIT: :mad: GRAWR, I've tried deleting this post at least FIVE times. It won't allow me to delete it. ? Sorry for the double post... :o
Copy linkTweet thisAlerts:
@TageOct 10.2004 β€”Β Try this (I put comments to show what it's doing):

[SIZE=1]&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled&lt;/title&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
var element_num=7;
var element_names=new Array(element_num);
element_names[0]="linea";
element_names[1]="color";
element_names[2]="valor";
element_names[3]="figura";
element_names[4]="textura";
element_names[5]="forma";
element_names[6]="espacio";
var element_imgs=new Array(element_num);
element_imgs[0]="http://www.freewebs.com/shokat/imgstore/linea.jpg";
element_imgs[1]="http://www.freewebs.com/shokat/imgstore/color.jpg";
element_imgs[2]="http://www.w3schools.com/images/w3default80.jpg";
element_imgs[3]="http://www.w3schools.com/images/w3default80.jpg";
element_imgs[4]="http://www.w3schools.com/images/w3default80.jpg";
element_imgs[5]="http://www.w3schools.com/images/w3default80.jpg";
element_imgs[6]="http://www.w3schools.com/images/w3default80.jpg";
var done_array=new Array(element_num); //this keeps track of which: the user got correct, incorrect, or hasn't gotten to yet
var questions_done=0, rand_num=0; //create variable "questions_done" to keep track of how many user got correct
//create "rand_num" here so I can use it in all the functions

//This function updates the image and does other various jobs
function askQuestion(){
// update tally
document.getElementById("tally").innerHTML=questions_done+" out of "+element_num+" complete";
// create a random number ##-!-##
do{
rand_num=Math.floor(Math.random()*(element_num));
}
// ##-!-## until the (random number inserted into the "done_array" array)!="c" anymore
// where "c" denotes that the user got that question correct already
while(done_array[rand_num]=="c");
// update the image(question) to the (random number inserted into the "element_imgs" array)
document.getElementById("rand_img").src=element_imgs[rand_num];
}

//This functions checks if user got it correct or incorrect (and does other various jobs)
function check(){
// check if user got answer correct
if(document.forms[0][0].value==element_names[rand_num]){
// add one to "questions_done" because this question is done =)
questions_done++;
alert("Cierto!");
// mark this done as CORRECT("c")
done_array[rand_num]="c";
// if "questions_done" made it to the number of questions available,
// that means that the user got all the questions correct
if(questions_done==element_num){
alert("Say whatever you say to say they completed all P=");
// reset the variables so user can do the quiz again
questions_done=0;
done_array=new Array(element_num); // note: this clears all the array's previous information
}
}
// if user didn't get it correct, it must mean that the user got it incorrect
else{
alert("Falso!");
// mark this done as FALSE("f")
done_array[rand_num]="f";
}
// update question image
askQuestion();
}

// this function is for if the user is stumped and wants the answer,
// you can safely remove this function and the associated button from the script and it will still work
function reveal(){
// reveal answer
alert(element_names[rand_num]);
// mark this done as FALSE("f")
done_array[rand_num]="f";
// update question image
askQuestion();
}
//]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="askQuestion()"&gt;
&lt;img src="" alt="random image" id="rand_img" /&gt;
&lt;form action="" onsubmit="return false"&gt;
&lt;div&gt;
&lt;label&gt;Input guess here (remember that spelling counts, ignore accents):
&lt;input type="text" name="guess" size="20" /&gt;
&lt;/label&gt;
&lt;input type="submit" value="Check!" onclick="check()" /&gt;
&lt;input type="button" value="Answer" onclick="reveal()" /&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;div id="tally"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/SIZE]
Copy linkTweet thisAlerts:
@ShokatauthorOct 10.2004 β€”Β Uh, wow. I think that Tage's suggestions just about finished this project. Methinks I'm getting a vague grasp of JavaScript, now. ?

Right now I'd like to bestow my gratitude to those that helped me in my dire need: Paul Jr, steelersfan88 and Tage.

Thank you.
Copy linkTweet thisAlerts:
@steelersfan88Oct 10.2004 β€”Β For the record, all of the /> in Tage's script are XHTML rules for closing tags. You can remove the " /" if you want, don't let it confuse you, provided you change the DOCTYPE to HTML 4.01, rather than XHTML.

Other than that clarification, is there naything else you need?
Copy linkTweet thisAlerts:
@ShokatauthorOct 10.2004 β€”Β Well, since I knew next to nothing about what I was doing prior to discovering this forum, there are many clarifications that I could use, steelersfan88.

But I wouldn't want to bother you guys with them, so thanks, anyway. ? You've done enough for me ... for now, at least. ?
Copy linkTweet thisAlerts:
@Paul_JrOct 10.2004 β€”Β [font=palatino linotype]Glad you were able to find a solution. ?[/font]
Γ—

Success!

Help @Shokat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 β€” BETA 5.5,
whats_new: community page,
up_next: more Davinciβ€’003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinciβ€’003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...