Skip to main content
S
SupraEdd
Participating Frequently
April 26, 2017
Answered

Creating a page that displays results dependant on a choice

  • April 26, 2017
  • 2 replies
  • 809 views

Hi, I've been tasked to create a page for our website, where the viewer will be presented with 3 questions. And dependant on their answer to those 3 questions, a certain text will be displayed.

If it could be done in simple code that I could drop into a page that would be preferable, I have no experience out side of the basic html funtions, so don't really want to start learning anything like MySQL lol!!!

Regards,

Edd...

    This topic has been closed for replies.
    Correct answer osgood_

    That makes it more difficult but it can be done, below is an example: (I dont know if there is a more streamlined workflow. (I certainly would not be wanting to do many more than about 3 questions, otherwise the combinations start multiplying considerably)

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    // form validation

    $(function(){

    $('.white_show').hide();

    $('.white_red_show').hide();

    $('.white_rose_show').hide();

    $('.white_red_rose_show').hide();

    $('.red_show').hide();

    $('.rose_show').hide();

    $('.red_rose_show').hide();

    $('#questions').css('cursor','pointer').submit(function(){

    $('.answers div').hide();

    //Check if checkbox is checked

    if ($('.white').is(':checked')) {

    var white = $('.white').val();

    }

    //Check if checkbox is checked

    if ($('.red').is(':checked')) {

    var red = $('.red').val();

    }

    //Check if checkbox is checked

    if ($('.rose').is(':checked')) {

    var rose = $('.rose').val();

    }

    //Likes White Wine

    if (white == "white" && red != "red" && rose != "rose") {

    $('.white_show').show();

    return false;

    }

    //Likes White & Rosa Wine

    if (white == "white" && red != "red" && rose == "rose") {

    $('.white_rose_show').show();

    return false;

    }

    //Likes Red & Rosa Wine

    if (white != "white" && red == "red" && rose == "rose") {

    $('.red_rose_show').show();

    return false;

    }

    //Likes Red Wine

    if (white != "white" && red == "red" && rose != "rose") {

    $('.red_show').show();

    return false;

    }

    //Likes White & Red Wine

    if (white == "white" && red == "red" && rose != "rose") {

    $('.white_red_show').show();

    return false;

    }

    //Likes White, Red & Rosa Wine

    if (white == "white" && red == "red" && rose == "rose") {

    $('.white_red_rose_show').show();

    return false;

    }

    //Likes Rosa Wine

    if (white != "white" && red != "red" && rose == "rose") {

    $('.rose_show').show();

    return false;

    }

    });

    });

    </script>

    </head>

    <body>

    <form id="questions" method="post" action="">

    <p>Please select every wine that you like.</p>

    <label for="white">White?</label>

    <input type="checkbox" name="white" value="white"  class="white" id="white"/>

    <br>

    <label for="red">Red?</label>

    <input type="checkbox" name="red" value="red" class="red" id="red" />

    <br>

    <label for="rosa">Rose?</label>

    <input type="checkbox" name="rose" value="rose"  class="rose" id="rose"/>

    <br>

    <input type="submit" name="submit" value="Submit">

    </form>

    <!-- end questions -->

    <div class="answers">

    <div class="white_show">

    <p>You told us you like white wine</p>

    </div>

    <div class="red_show">

    <p>You told us you like red wine</p>

    </div>

    <div class="white_red_show">

    <p>You told us you like white AND red wine</p>

    </div>

    <div class="white_rose_show">

    <p>You told us you like white AND rose wine</p>

    </div>

    <div class="white_red_rose_show">

    <p>You told us you like white AND red AND rose wine</p>

    </div>

    <div class="red_rose_show">

    <p>You told us you like red AND rose wine</p>

    </div>

    <div class="rose_show">

    <p>You told us you like rose wine</p>

    </div>

    </div>

    <!-- end answers -->

    </body>

    </html>

    2 replies

    O
    osgood_
    Legend
    April 26, 2017

    Are you looking for something like the below?

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    $(document).ready(function() {

    $('.question div').hide();

    $('.select_me').click(function() {

    $('.select_me').not(this).prop('checked', false);

    $('.question div').hide();

    $(this).next('div').show();

    });

    });

    </script>

    </head>

    <body>

    <div class="question">

    <label for="male">Are you a Male?</label>

    <input type="checkbox" id="male" class="select_me">

    <div class="male_info">

    <p>Male Information goes here.</p>

    </div>

    <!-- end male_info -->

    </div>

    <!-- end question -->

    <div class="question">

    <label for="female">Are you a Female?</label>

    <input type="checkbox" id="female" class="select_me">

    <div class="female_info">

    <p>Female Information goes here.</p>

    </div>

    <!-- end female_info -->

    </div>

    <!-- end question -->

    <div class="question">

    <label for="chicken">Are you a Chicken?</label>

    <input type="checkbox" id="chicken" class="select_me">

    <div class="chicken_info">

    <p>Chicken Information goes here.</p>

    </div>

    <!-- end chicken_info -->

    </div>

    <!-- end question -->

    </body>

    </html>

    S
    SupraEddAuthor
    Participating Frequently
    April 26, 2017

    Thanks Osgood, that's certainly helpful. A massive step in progress for me.

    I didn't make it clear, but the viewer would be able to select multiple options. So with your example, if they selected male and chicken there would be different informational text displayed compared to if they selected female and chicken.

    Regards,

    Edd...

    S
    SupraEddAuthor
    Participating Frequently
    April 27, 2017

    That makes it more difficult but it can be done, below is an example: (I dont know if there is a more streamlined workflow. (I certainly would not be wanting to do many more than about 3 questions, otherwise the combinations start multiplying considerably)

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8"/>

    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    // form validation

    $(function(){

    $('.white_show').hide();

    $('.white_red_show').hide();

    $('.white_rose_show').hide();

    $('.white_red_rose_show').hide();

    $('.red_show').hide();

    $('.rose_show').hide();

    $('.red_rose_show').hide();

    $('#questions').css('cursor','pointer').submit(function(){

    $('.answers div').hide();

    //Check if checkbox is checked

    if ($('.white').is(':checked')) {

    var white = $('.white').val();

    }

    //Check if checkbox is checked

    if ($('.red').is(':checked')) {

    var red = $('.red').val();

    }

    //Check if checkbox is checked

    if ($('.rose').is(':checked')) {

    var rose = $('.rose').val();

    }

    //Likes White Wine

    if (white == "white" && red != "red" && rose != "rose") {

    $('.white_show').show();

    return false;

    }

    //Likes White & Rosa Wine

    if (white == "white" && red != "red" && rose == "rose") {

    $('.white_rose_show').show();

    return false;

    }

    //Likes Red & Rosa Wine

    if (white != "white" && red == "red" && rose == "rose") {

    $('.red_rose_show').show();

    return false;

    }

    //Likes Red Wine

    if (white != "white" && red == "red" && rose != "rose") {

    $('.red_show').show();

    return false;

    }

    //Likes White & Red Wine

    if (white == "white" && red == "red" && rose != "rose") {

    $('.white_red_show').show();

    return false;

    }

    //Likes White, Red & Rosa Wine

    if (white == "white" && red == "red" && rose == "rose") {

    $('.white_red_rose_show').show();

    return false;

    }

    //Likes Rosa Wine

    if (white != "white" && red != "red" && rose == "rose") {

    $('.rose_show').show();

    return false;

    }

    });

    });

    </script>

    </head>

    <body>

    <form id="questions" method="post" action="">

    <p>Please select every wine that you like.</p>

    <label for="white">White?</label>

    <input type="checkbox" name="white" value="white"  class="white" id="white"/>

    <br>

    <label for="red">Red?</label>

    <input type="checkbox" name="red" value="red" class="red" id="red" />

    <br>

    <label for="rosa">Rose?</label>

    <input type="checkbox" name="rose" value="rose"  class="rose" id="rose"/>

    <br>

    <input type="submit" name="submit" value="Submit">

    </form>

    <!-- end questions -->

    <div class="answers">

    <div class="white_show">

    <p>You told us you like white wine</p>

    </div>

    <div class="red_show">

    <p>You told us you like red wine</p>

    </div>

    <div class="white_red_show">

    <p>You told us you like white AND red wine</p>

    </div>

    <div class="white_rose_show">

    <p>You told us you like white AND rose wine</p>

    </div>

    <div class="white_red_rose_show">

    <p>You told us you like white AND red AND rose wine</p>

    </div>

    <div class="red_rose_show">

    <p>You told us you like red AND rose wine</p>

    </div>

    <div class="rose_show">

    <p>You told us you like rose wine</p>

    </div>

    </div>

    <!-- end answers -->

    </body>

    </html>


    Osgood, thanks so much that's brilliant, you have really helped.

    thanks to both you chaps for your patience.

    Regards,

    Edd...

    Rob Hecker2
    Rob Hecker2
    Legend
    April 26, 2017

    If you want to keep the technology simple, you could do this with just CSS and a tiny bit of javascript (onclick event) by using the display property of divs. Hide all the answer divs and display one based on the selection made.

    S
    SupraEddAuthor
    Participating Frequently
    April 26, 2017

    Thanks Rob, that certainly sounds like a good way to get it going. I'll have to look into it a bit more in regards to javascript as I hadn't done any coding in that for about 13 years now!

    Rob Hecker2
    Rob Hecker2
    Legend
    April 26, 2017

    Here's an example:

    <select name='how_heard' id='howheard' onchange='selection()'>
    <option value='Newsletter'>Newsletter</option>
    <option value='Other'>Other</option>

    </select>

    <script>
    function selection()
    {   
    var how_heard = document.getElementById('howheard').value;   
        if (how_heard == 'Other') {
    document.getElementById('howheardother').innerHTML = \"<td style='text-align:right;width:33%'>How heard other:</td><td><input type='text' name='how_heard_other' required style='width:100%' value='how_heard_other'></td>\";
      } else {
    document.getElementById('howheardother').innerHTML ='';
      }
        return true;
    }
        </script>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices