Please help! to make a program with javascript

[Michelle.G]

Hi! frnds, I was wondering if you could help me with the JavaScript programing...

Every possible help will be appreciated

I am very new to the world of programming and JavaScript but I have some Ideas which I would like to execute and I will learn anything and everything in the way to accomplish them...

Program:

user end: the page is about users priorities and displaying back the selected... the program work as a user reaction based comparison module...
where the priorities stored in the program are shown 2 at a time and lets user to select what is more important to him and stores the result in another variable than that variable is shown with another variable which is already stored and the result out of that is stored in another new variable and so on.. in the end it show the result of important selected priorities...

1) say there are 6 variables storing string values:

 <script type = "text/javascript"> 
 var p1 = "Doctors appointment"; 
 var p2 = "studying for the exam"; 
 var p3 = "Going out for most awaited shopping"; 
 var p4 = "Login on Facebook"; 
 var p5 = "Replying to text msgs"; 
 var p6 = "Go out with friends";

2) there are two sections on the html document:

i) where the variables are displayed dynamically and changes the value on click..
it works like a comparison where user selects (onclick) what is more important to him shows the next value and so on...
in the end stores the result...

functioning(I have no I idea how to do this): say on the html document only two variables are displayed at first and than the user selects one of it as more important to him so the result is stored in another new variable than that new variable is shown with the third stored variable and once one of them is selected it is stored in another new variable and is compared with forth stored variable and so on till the last selected is stored as the result1...

all comparisons must happen on the same div of the html document procedure has to loop three times till 3 results (result1, result2, result3) out of six are selected more important...
result1 has to be removed from the next loop for result 2 as result1 is already selected important by the user..
result1 and result2 are to be removed from the next loop for result 3 as they are already selected important by the user

ii) the second section displays important 3 results (result1, result2, result3) selected by him...


my friend told jQuery can do the dynamic comparison part but I don't know how to use it...

the logic of creating new variable for storing result and then comparing can be improved or changed...

Please help

[Michelle.G]

Originally Posted by iBall

This sounds like a homework assignment.

Post the code you have so far and you are much more likely to get meaningful help.

Also, since you say you are very new, I would suggest you stay away from jQuery for now. After all, jQuery is just a library of normal JavaScript functions. It is not a different language to JavaScript. Therefore, you can't do anything with jQuery that cannot be done with JavaScript.

I am sorry to say but I am out of ideas of creating the user reaction based comparison function part in the program and that is why I am asking help...
I cant think how to write that comparison function

anyways thanks for your reply

[Peeyush]

so do you know any javascript? i mean even a little? have you tried creating something? if you have please post it here. you cant make a program without knowledge of the programming language, copying and pasting scripts from here and there wont help....

[Michelle.G]

Originally Posted by Peeyush

so do you know any javascript? i mean even a little? have you tried creating something? if you have please post it here. you cant make a program without knowledge of the programming language, copying and pasting scripts from here and there wont help....

yes I know basics of programing in JavaScript eg: syntax, variable, arrays, data types,operators, built-in objects, DOM, conditions, loops etc...but the program I am trying to create is beyond my logic and that is why I am seeking help in here...

help is always appreciated

[Philip M]

This seems a strange way to go about selecting the first three preferences out of six (if I have understood the assignment correctly). I would suggest using a select list:-

<html>
<head>
</head>
<body>

<form name='myform'>
<select name = 'list1' id = 'list1' onchange = "showOptions(this)">
<option selected value=""> Choose A Fruit</option>
<option value='Mango'> Mango </option>
<option value='Apple'> Apple </option>
<option value='Orange'> Orange </option>
<option value='Watermelon'> Watermelon </option>
<option value='Plum'> Plum </option>
<option value='Papaya'> Papaya </option>
</select>
<br><br><br>

First Preference:&nbsp &nbsp &nbsp <input type = "text" name = "txt1" id = "txt1" readonly"><br>
Second Preference: <input type = "text" name = "txt2" id = "txt2" readonly"><br>
Third Preference: &nbsp &nbsp  <input type = "text" name = "txt3" id="txt3" readonly"><br>
<br><br>
<input type = "button" name = "but1" value = "Clear Preferences" onclick = "clearPrefs()">

</form>

<script type = "text/javascript">
var chosen = [];
for (var i = 0; i<document.myform.list1.length; i++) {
chosen[i] = 0;
}
var count = 1;

function showOptions(which){
var x = which.value;
var se = which.selectedIndex;
if (chosen[se] == 1) {
alert ("You have alreay chosen that option! Try again!")
return false;
}
if ((x!="") && (count <=3)){
chosen[se] = 1;
document.getElementById("txt"+count).value = x;
count ++;
}
}

function clearPrefs() {
count = 1;
document.myform.list1.selectedIndex = 0;
for (var i=1; i <=3; i++) {
document.getElementById("txt"+i).value = "";
}
for (var i = 0; i<document.myform.list1.length; i++) {
chosen[i] = 0;
}
}

</script>
</body>
</hrml>

There are of course many possible approaches. Someone else may think of a better one.

[xelawho]

here's another way, just for kicks...

<!doctype html>
<html>
<head>

</head>

<body onload="display()">
<div id="questions">
Please note your preference: <br>
<input type='radio' name='rad' onclick='choose(1)'/><span id="opt1"></span>
<input type='radio' name='rad' onclick='choose(0)'/><span id="opt2"></span>
</div>
<div id="results"></div>

<script type="text/javascript">
var opts=[["Doctors appointment", "studying for the exam"], ["Going out for most awaited shopping", "Login on Facebook"], ["Replying to text msgs", "Go out with friends"]]

var choices=0;

function choose(idx) {
opts[choices].splice(idx,1);
if (choices==2){
document.getElementById("questions").style.display="none"
document.getElementById("results").innerHTML="Your preferences are:<br>"
    for (var i = 0; i < opts.length; i++) {
document.getElementById("results").innerHTML+=opts[i][0]+"<br>"
	}
} else{
choices++
display();
}
}

function display(){
document.getElementById("opt1").innerHTML=opts[choices][0]
document.getElementById("opt2").innerHTML=opts[choices][1]
}


</script>
</body>
</html>

[Philip M]

The problem there is that the user may prefer "Doctor's appointment" to "Studying for exam", but what if he prefers "Studying for exam" to "Login on Facebook", "Replying to text msgs" or "Go out with friends"?

Or have I misunderstood the assignment?

[c1lonewolf]

If I'm following this correctly, wouldn't it just be easier to create a form with all the options using a checkbox. Then use the box's onchange event handler to adjust an array accordingly.
"Select items according to importance"
Then if you needed to start over you simply uncheck everything.

Just wondering...

[felgall]

If it were going to be used in the real world you'd need a way for it to work without JavaScript as well si the obvious starting point would be to simply create all the options as submit buttons and one extra to restart. You'd also have hidden fields to store the value(s) previously selected. The (theoretical) server side code would store the value from the selected submit button in the next unused hidden field when it redisplays the form with that button disabled until all are filled after which it would then proceed to process them all.

The JavaScript would then be attached to this si that it provides equivalent functionality by storing the value of the submit button in the next empty hidden field, disabling that submit button and then aborting the submit. It would do whatever is necessary as additional processing after the last hidden field is filled inb order to process all the hidden fields.

By using that design for the JavaScript you'd have a version that could be made to function without JavaScript by adding server side processing without having to make any changes to the form in order to implement it.

[Michelle.G]

Hey sorry for the late reply had logged off by the time you all replied...

Thank you all for your efforts and contribution especially xelawho and Philip M...

I feel I was not efficient to explain the module correctly the closest was xelawho...

let explain with an example:

say there are 6 variables storing string values:

var p1 = "Doctors appointment";
var p2 = "studying for the exam";
var p3 = "Going out for most awaited shopping";
var p4 = "Login on Facebook";
var p5 = "Replying to text msgs";
var p6 = "Going out with friends";

how it works on the users end:
(this is what user sees on the page)

What is more important to you? if you had to do these thing at the same time, which one would you give the priority?
Options (click any one)

1) Doctors appointment // "Login on Facebook" // "Replying to text msgs" // "Going out with friends"

or

2) studying for the exam // "Going out for most awaited shopping"


//First click (select): if the user click on option 1 then option 1 remains there and option 2 changes to var p3 ("Going out for most awaited shopping")

//Second click (select): if the user then selects the option 2 where the value is var p3 "Going out for most awaited shopping" it remains unchanged there and the option 1 having value p1 ("Doctors appointment") changes to p4 ("Login on Facebook")

//Third click (select): if the user then selects again option 2 where its value is still var p3 then option 1 changes from var p4 ("Login on Facebook") to var p5 ("Replying to text msgs")

//Fourth click (select): if the user still selects option 2 where its value is still var p3 then option 1 again changes from var p5 to var p6 ("Go out with friends")

//Fifth click (select): if the user selects option 1 where its value is var p6 ("Going out with friends") over option 2 var p3 ("Going out for most awaited shopping")...
Then the result is stored as result1 and is displayed on the screen and the next loop starts for result2 where result1 (in example:"Going out with friends") has to be removed from the next loop for result 2 as result1 is already selected important by the user..
result1 and result2 are to be removed from the next loop for result 3 as they are already selected important by the user...

Yes! it is wierd type of selection and is complex but that is how it has to be

I hope I was efficient in explaining the module correctly this time

awaiting your reply

[Old Pedant]

I think what is confusing is that you keep showing things like this:

1) Doctors appointment // "Login on Facebook" // "Replying to text msgs" // "Going out with friends"
or
2) studying for the exam // "Going out for most awaited shopping"

But *I THINK* what you mean is that what is DISPLAYED is only

1) Doctors appointment
or
2) studying for the exam

And you were just using the // stuff to show the parts that are HIDDEN to the user.

********

Am I right?

[Michelle.G]

Originally Posted by Old Pedant

I think what is confusing is that you keep showing things like this:

But *I THINK* what you mean is that what is DISPLAYED is only

And you were just using the // stuff to show the parts that are HIDDEN to the user.

********

Am I right?

yes true!! // means hidden... but the hidden part corresponds to the explanation given below...

Please see the explanation below to understand the functioning

[Old Pedant]

Okay, so the basic idea is simple. BUT... But what happens when you run out of one set of choices?

1) Doctors appointment // "Login on Facebook" // "Replying to text msgs" // "Going out with friends"
2) studying for the exam // "Going out for most awaited shopping"

Suppose the user choose option 1 twice.

Start:
1) Doctors appointment
2) studying for the exam 

Choose option 1:
1) Doctors appointment 
2) Going out for most awaited shopping

Choose option 1:
1) Doctors appointment 
2)

So then, at this point, you show "Doctors appointment" in the output area and start over with

1) "Login on Facebook" // "Replying to text msgs" // "Going out with friends"
2) studying for the exam // "Going out for most awaited shopping"

Is that right?

So you do that until what?

And what happens if the FIRST TWO end results are

studying for the exam
Going out for most awaited shopping

Now there are no choices left in the second list.

Is the game over?

*********

You simply have *NOT* explained thoroughly enough and/or considered/explained all possible scenarios.

[xelawho]

going for a wild swing here...

in that scenario, Doctors appointment gets saved as favorite 1 and the cycle of questions starts again, but with Doctor's appointment removed from the list

and so on until you have 3 faves?

[Old Pedant]

Let me make that real problem scenario clearer:

These are the two sets of choices:

1) Doctors appointment // "Login on Facebook" // "Replying to text msgs" // "Going out with friends"
2) studying for the exam // "Going out for most awaited shopping"

So we start with:

1) Doctors appointment
2) studying for the exam

The user chooses option (2)

Which then gives us

1) Login on Facebook
2) studying for the exam

The user choose option 2 twice more and we have

1)
2) studying for the exam

So we put "studying for the exam" into the favorites list and now we start over with

1) Doctors appointment
2) Going out for most awaited shopping

Again, the user choose option 2 four times in a row and you end up with

1)
2) Going out for most awaited shopping

So you put "Going out for most awaited shopping" on the favorites list and you start again with

1) Doctors appointment
2)

OOPS! We ran out of items in the option (2) list!

But the user REALLY wants to choose "Replying to text msgs" as his/her third favorite.

BUT THERE IS NO WAY TO DO SO!

**********

The whole thing seems BADLY BROKEN to me. Unless the two sets of options *EACH* have AT LEAST THREE choices, there is no way to end up with three favorites each and every time.

**********

And by the way: Is this assignment REALLY being given in OHIO?

I am skeptical. I can't imagine any American teen-ager using the phrase "Going out for most awaited shopping". That sounds like a literal translation of Chinese or some other language.