8 Replies - 528 Views - Last Post: 23 August 2013 - 08:14 PM

#1 Markh96  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 22-August 13

Question: Multiple choices depending previous ones.

Posted 22 August 2013 - 05:13 PM

Hi everyone, this is the first time I ask a question online and it's also the first time I do a web program

So basically I am doing a calculator for my school so the students can calculate their average without worrying about coefficient of their courses (French system).

I want my program to ask the user questions, depending on the previous answers.

For exemple:

-First of all, the user has to choose his class (grade 6, 7, ... ,12)
-Let's say the user submits on grade 7.
-Automatically, var class = 7, and the program asks him if he does Latin, with 2 possible answers( Yes, No ).
-If the user chooses Yes, then var Latin = 1.
-Otherwise, var Latin = 0.


I hope I was clear enough, if I wasn't, please let me know, I can answer any question.
Thanks for helping me out!
MarkH

Is This A Good Question/Topic? 0
  • +

Replies To: Question: Multiple choices depending previous ones.

#2 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,927
  • Joined: 30-April 10

Re: Question: Multiple choices depending previous ones.

Posted 22 August 2013 - 08:01 PM

What have you tried so far? Post any code you have a question about.

The idea of having different questions based on an answer has many different ways of accomplishing. What have you come up with to implement this idea?
Was This Post Helpful? 0
  • +
  • -

#3 Markh96  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 22-August 13

Re: Question: Multiple choices depending previous ones.

Posted 22 August 2013 - 09:26 PM

Here's an idea of what I wanted to do :


<!DOCTYPE html>
<html>
<body>

<p>Choose class:</p>

<button onclick="myFunction6()">grade 6</button>

<script>
function myFunction6()
{
var classes = 6;
document.write("Insert your grades above:");
}
</script>

<button onclick="myFunction7()">grade 7</button>

<script>
function myFunction7()
{
var classes = 7
document.write("Latin? or No Latin?");
}
</script>

<p id="demo"></p>

</body>
</html>

This post has been edited by Dormilich: 22 August 2013 - 10:25 PM
Reason for edit:: please use [code] [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3576
  • View blog
  • Posts: 10,441
  • Joined: 08-June 10

Re: Question: Multiple choices depending previous ones.

Posted 22 August 2013 - 10:28 PM

this wont work. because document.write() kills your page.

besides that, for choosing a class Id use a dropdown (<select>) and the topics can be made through pairs (yes/no) of radio buttons.
Was This Post Helpful? 0
  • +
  • -

#5 Markh96  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 22-August 13

Re: Question: Multiple choices depending previous ones.

Posted 23 August 2013 - 09:10 AM

How here's another way:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.gradeLevel {
display: none;
}
</style>
</head>
<body>

<form id="chooser">
Choose your grade level:<br/>
<label><input type="radio" name="level" value="6"/> Grade 6</label>
<label><input type="radio" name="level" value="7"/> Grade 7</label>
<label><input type="radio" name="level" value="8"/> Grade 8</label>
</form>
<hr/>

<div id="grade6" class="gradeLevel">
<form id="form6">
Do you eat lunch?
<label><input type="radio" name="lunch" value="1"/> Yes</label>
<label><input type="radio" name="lunch" value="0"/> No</label>
</form>

<form id="meat">
Do you eat meat?
<label><input type="radio" name="Meat" value="1"/> Yes, meat</label>
<label><input type="radio" name="No meat" value="0"/> No meat</label>
</form>

</div>



<div id="grade7" class="gradeLevel">
<form id="form7">
Do you take Latin?
<label><input type="radio" name="latin" value="1"/> Yes</label>
<label><input type="radio" name="latin" value="0"/> No</label>
</form>
</div>

<div id="grade8" class="gradeLevel">
<form id="form8">
Do you hate school?
<label><input type="radio" name="hate" value="1"/> Yes</label>
<label><input type="radio" name="hate" value="0"/> No</label>
</form>
</div>

<script type="text/javascript">
var rbLevels = document.getElementById("chooser").level;
for ( var r = 0; r < rbLevels.length; ++r )
{
rbLevels[r].onclick = changeGrade;
}
function changeGrade( )
{
for ( var g = 6; g <= 99; ++g )
{
var div = document.getElementById("grade"+g);
if (div == null) return;
div.style.display = ( g == this.value ) ? "block" : "none";
}
}

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



But why doesn't the Grade 6 -> Meat selection work properly?
Was This Post Helpful? 0
  • +
  • -

#6 DblAAssassin  Icon User is offline

  • D.I.C Regular

Reputation: 34
  • View blog
  • Posts: 261
  • Joined: 11-May 13

Re: Question: Multiple choices depending previous ones.

Posted 23 August 2013 - 09:22 AM

I would use True or False for the latin variable; and I thought functions were written like this?...
var myFunction = function(x){
/* Code
Code
Code */
};


This post has been edited by DblAAssassin: 23 August 2013 - 09:23 AM

Was This Post Helpful? 0
  • +
  • -

#7 Markh96  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 22-August 13

Re: Question: Multiple choices depending previous ones.

Posted 23 August 2013 - 09:23 AM

never mind, it worked properly right now:

Is it possible to ask the user to insert his grades ONLY after he finishes answering all the questions?
and is it possible to let him input the grades of his subjects depending on the grade he s in and the questions he answered?
Exemple, if he takes latin, An extra box for Latin will appear after all the normal subjects.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.gradeLevel {
display: none;
}
</style>
</head>
<body>

<form id="chooser">
Choose your grade level:<br/>
<label><input type="radio" name="level" value="6"/> Grade 6</label>
<label><input type="radio" name="level" value="7"/> Grade 7</label>
<label><input type="radio" name="level" value="8"/> Grade 8</label>
</form>
<hr/>

<div id="grade6" class="gradeLevel">
<form id="form6">
Do you eat lunch?
<label><input type="radio" name="lunch" value="1"/> Yes</label>
<label><input type="radio" name="lunch" value="0"/> No</label>
</form>
    Do you eat meat?
    <label><input type="radio" name="Meat" value="1"/> Yes, meat</label>
    <label><input type="radio" name="Meat" value="0"/> No meat</label>
    </form>
</div>



<div id="grade7" class="gradeLevel">
<form id="form7">
Do you take Latin?
<label><input type="radio" name="latin" value="1"/> Yes</label>
<label><input type="radio" name="latin" value="0"/> No</label>
</form>
</div>

<div id="grade8" class="gradeLevel">
<form id="form8">
Do you hate school?
<label><input type="radio" name="hate" value="1"/> Yes</label>
<label><input type="radio" name="hate" value="0"/> No</label>
</form>
</div>

<script type="text/javascript">
var rbLevels = document.getElementById("chooser").level;
for ( var r = 0; r < rbLevels.length; ++r )
{
rbLevels[r].onclick = changeGrade;
}
function changeGrade( )
{
for ( var g = 6; g <= 99; ++g )
{
var div = document.getElementById("grade"+g);
if (div == null) return;
div.style.display = ( g == this.value ) ? "block" : "none";
}
}

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

Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,499
  • Joined: 12-December 12

Re: Question: Multiple choices depending previous ones.

Posted 23 August 2013 - 09:31 AM

What is supposed to happen that is not happening?
Was This Post Helpful? 0
  • +
  • -

#9 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 129
  • View blog
  • Posts: 837
  • Joined: 25-October 08

Re: Question: Multiple choices depending previous ones.

Posted 23 August 2013 - 08:14 PM

Cross-posted and answered enough for a homework (?) assignment.
See: http://www.codingfor...742#post1353742
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1