How to code a site to give information about responses to questions?

[dawnhorse]

Hi guys, so I decided to try a little project. I'm definitely a beginner in coding, but I'm trying to learn more. What I want the site to do is when you answer some questions, it will list out your responses in different wording. I can embed the questions, what I need to know is how to get the response.

For example:
Question:
Apples 1 2 3 4 5 Oranges
If you select 1, answer:
You are an apple lover

Thank you so much!

 

[VBService]

You can use e.g. <input type="radio">

<style>
  .question {
    padding: .5rem;
    margin: .25rem 0;
    background-color: hsl(0 0% 0% /.1);
  }
  ul {
    list-style-type: none;
    padding-left: 1rem;
  }
  input,
  label {
    cursor: pointer;
  }
</style>

<div class="question">
  <p>What is your favorite fruit?</p>
  <ul>
    <li>
      <input type="radio" id="fruit-1" name="fruit" value="apple">
      <label for="fruit-1">Apple</label>
    </li>
    <li>
      <input type="radio" id="fruit-2" name="fruit" value="banana">
      <label for="fruit-2">Banana</label>
    </li>
    <li>
      <input type="radio" id="fruit-3" name="fruit" value="pear">
      <label for="fruit-3">Pear</label>
    </li>
    <li>
      <input type="radio" id="fruit-4" name="fruit" value="orange">
      <label for="fruit-4">Orange</label>
    </li>
  </ul>
</div>

or if you need more answers for the same question use <input type="checkbox">

<style>
  .question {
    padding: .5rem;
    margin: .25rem 0;
    background-color: hsl(0 0% 0% /.1);
  }
  ul {
    list-style-type: none;
    padding-left: 1rem;
  }
  input,
  label {
    cursor: pointer;
  }
</style>

<div class="question">
  <p>What is your favorite fruits?</p>
  <ul>
    <li>
      <input type="checkbox" id="fruit-1" name="fruit[]" value="apple">
      <label for="fruit-1">Apple</label>
    </li>
    <li>
      <input type="checkbox" id="fruit-2" name="fruit[]" value="banana">
      <label for="fruit-2">Banana</label>
    </li>
    <li>
      <input type="checkbox" id="fruit-3" name="fruit[]" value="pear">
      <label for="fruit-3">Pear</label>
    </li>
    <li>
      <input type="checkbox" id="fruit-4" name="fruit[]" value="orange">
      <label for="fruit-4">Orange</label>
    </li>
  </ul>
</div>

more <input> types

 

[jPaulB]

Hi dawnhorse,

The question itself is kind of confusing.

Apples 1 2 3 4 5 Oranges

VBService has shown a couple of examples where a visitor will pick their specific favorite fruit from a list of several different kinds of fruit.

Your question is kind of an open-ended question when computers like close-ended questions much better. (#1 or #2 or #3 or #4 or #5)

The second part of your question was to somehow display a visitors response.
If you select 1, answer:
You are an apple lover

That's a whole different thing. An HTML page is static. It is a display/format language like a Microsoft WORD document. An HTML page can not retain any visitor response as "information". A visitor can select a link and transfer to a different HTML page, but to dynamically add content based upon a visitors' answer is a different story altogether.

To do that sort of thing, you'll have to also use secondary languages like JavaScript or PHP

 

[dawnhorse]

Thank you so much for the answers!

 

[VBService]

That's a whole different thing. An HTML page is static.

you'll have to also use secondary languages like JavaScript or PHP

you forgot about css

<style>
  .question {
    position: relative;
    padding: .5rem;
    margin: .25rem 0;
    background-color: hsl(0 0% 0% /.1);
  }
  ul {
    list-style-type: none;
    padding-left: 1rem;
  }
  input,
  label {
    cursor: pointer;
  }
  section {
    position: absolute;
    display: none;
    bottom: .25rem;
    font: 400 .9rem/1 system-ui, monospace;
  }
  section span {
    font-weight: bold;
    text-shadow: 0 0 2px black;
  }
  li:nth-child(1) section span {
    color: red;
  }
  li:nth-child(2) section span {
    color: yellow;
  }
  li:nth-child(3) section span {
    color: green;
  } 
  li:nth-child(4) section span {
    color: orange;
  } 
  #fruit-1:checked ~ #fruit-text-1,
  #fruit-2:checked ~ #fruit-text-2,
  #fruit-3:checked ~ #fruit-text-3,
  #fruit-4:checked ~ #fruit-text-4 {
    display: block;
  }
</style>

<div class="question">
  <p>What is your favorite fruit?</p>
  <ul>
    <li>
      <input type="radio" id="fruit-1" name="fruit" value="apple">
      <label for="fruit-1">Apple</label>
      <section id="fruit-text-1">
        You are an <span>apple</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-2" name="fruit" value="banana">
      <label for="fruit-2">Banana</label>
      <section id="fruit-text-2">
        You are a <span>banana</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-3" name="fruit" value="pear">
      <label for="fruit-3">Pear</label>
      <section id="fruit-text-3">
        You are a <span>pear</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-4" name="fruit" value="orange">
      <label for="fruit-4">Orange</label>
      <section id="fruit-text-4">
        You are an <span>orange</span> lover   
      </section>
    </li>
  </ul>
</div>

 

[jPaulB]

WOW!

I never thought CSS could do that! I though CSS was display only.
I have to study the code supplied carefully.

Thanks again

 

[VBService]

The trick is that <input > type "radio" or "checkbox" with :checked pseudo-classes in css works like "if" statement for e.g. javascript.

Check: CSS Selector Reference

 

[VBService]

I never thought CSS could do that!

<style>
  .question {
    position: relative;
    padding: .5rem;
    margin: .25rem 0;
    background-color: hsl(0 0% 0% /.1);
  }
  ul {
    list-style-type: none;
    padding-left: 1rem;
  }
  input,
  label {
    cursor: pointer;
  }
  section {
    position: absolute;
    display: none;
    bottom: .25rem;
    font: 400 .9rem/1 system-ui, monospace;
  }
  section span {
    font-weight: bold;
  }
  [id^="fruit"]:checked ~ [id^="fruit-text"] {
    display: block;
  }
</style>

<div class="question">
  <p>What is your favorite fruit?</p>
  <ul>
    <li>
      <input type="radio" id="fruit-1" name="fruit" value="apple">
      <label for="fruit-1">Apple</label>
      <section id="fruit-text-1">
        You are an <span>apple</span> lover  
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-2" name="fruit" value="banana">
      <label for="fruit-2">Banana</label>
      <section id="fruit-text-2">
        You are a <span>banana</span> lover  
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-3" name="fruit" value="pear">
      <label for="fruit-3">Pear</label>
      <section id="fruit-text-3">
        You are a <span>pear</span> lover  
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-4" name="fruit" value="orange">
      <label for="fruit-4">Orange</label>
      <section id="fruit-text-4">
        You are an <span>orange</span> lover  
      </section>
    </li>
   
    <li>
      <input type="radio" id="fruit-5" name="fruit" value="grape">
      <label for="fruit-5">Grape</label>
      <section id="fruit-text-5">
        You are a <span>grape</span> lover  
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-6" name="fruit" value="strawberry">
      <label for="fruit-6">Strawberry</label>
      <section id="fruit-text-6">
        You are a <span>strawberry</span> lover  
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-7" name="fruit" value="watermelon">
      <label for="fruit-7">Watermelon</label>
      <section id="fruit-text-7">
        You are a <span>watermelon</span> lover  
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-8" name="fruit" value="kiwi">
      <label for="fruit-8">Kiwi</label>
      <section id="fruit-text-8">
        You are a <span>kiwi</span> lover  
      </section>
    </li>
  </ul>
</div>

<style>
  .question {
    position: relative;
    padding: .5rem;
    margin: .25rem 0;
    background-color: hsl(0 0% 0% /.1);
  }
  ul {
    list-style-type: none;
    padding-left: 1rem;
  }
  input,
  label {
    cursor: pointer;
  }
  section {
    position: absolute;
    /*display: none;*/
    opacity: 0;
    letter-spacing: 1rem;
    bottom: .25rem;
    font: 400 .9rem/1 system-ui, monospace;
    transition: opacity 350ms, letter-spacing 1s;
  }
  section span {
    font-weight: bold;
  }
  [id^="fruit"]:checked ~ [id^="fruit-text"] {
    /*display: block;*/
    opacity: 1;
    letter-spacing: 0;
  }
</style>

<div class="question">
  <p>What is your favorite fruit?</p>
  <ul>
    <li>
      <input type="radio" id="fruit-1" name="fruit" value="apple">
      <label for="fruit-1">Apple</label>
      <section id="fruit-text-1">
        You are an <span>apple</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-2" name="fruit" value="banana">
      <label for="fruit-2">Banana</label>
      <section id="fruit-text-2">
        You are a <span>banana</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-3" name="fruit" value="pear">
      <label for="fruit-3">Pear</label>
      <section id="fruit-text-3">
        You are a <span>pear</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-4" name="fruit" value="orange">
      <label for="fruit-4">Orange</label>
      <section id="fruit-text-4">
        You are an <span>orange</span> lover   
      </section>
    </li>
    
    <li>
      <input type="radio" id="fruit-5" name="fruit" value="grape">
      <label for="fruit-5">Grape</label>
      <section id="fruit-text-5">
        You are a <span>grape</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-6" name="fruit" value="strawberry">
      <label for="fruit-6">Strawberry</label>
      <section id="fruit-text-6">
        You are a <span>strawberry</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-7" name="fruit" value="watermelon">
      <label for="fruit-7">Watermelon</label>
      <section id="fruit-text-7">
        You are a <span>watermelon</span> lover   
      </section>
    </li>
    <li>
      <input type="radio" id="fruit-8" name="fruit" value="kiwi">
      <label for="fruit-8">Kiwi</label>
      <section id="fruit-text-8">
        You are a <span>kiwi</span> lover   
      </section>
    </li>
  </ul>
</div>

 

[Saul H.]

Certainly use radio! Although, to receive an ultimate solution, it would be required that one conduct JavaScript Form Manipulation. I you are not familiar with the language, refer to my Mandatory Element To Conduct Javascript DOM & Form Manipulations thread.

To begin, one would have to assign the elements' precise identities using various commands, the likes of document.getElementById, and create a variable!

var prefrences = document.getElementById("favffruit");

Create a function() using addEventListener, and nest the prior event in the function().

document.getElementById('submitpref').addEventListener("click", function() {
//Contained is prior nested variable.
var paragraph = document.getElementByTagName("p");
if (preferences = "Oranges") {
paragraph.textContent = "You are an apple lover!";
}
else if (preferences = "Apples") {
paragraph.textContent = "You have a certain likeness towards Oranges!";
}
});