CODEWITHSUNDEEP
htmlcss
Laufeena
Laufeena

Reputation: 3

Beginner stuck on the task of making a working html and css quiz

I've been trying to learn the beginnings of html and css and as my first task I was asked to make a function quiz with html and css coding.

I cannot get help from the people who tasked me with this as I cannot get ahold of them and I am hoping that others may be able to give me some pointers and advice of what I need to do to get the functions right.

I have only done half a day of learning on this and only have 1 powerpoint on how to do my task but it doesn't cover everything that needs to be done or how to use the coding suggested to get the outcome I want to get.

Here is my html coding for one of my questions:

<h2>Question1</h2>
        <h3>Which type of dog would you expect to find on a farm?</h3>
        <p id="OptionOne"><img src="https://www.mybestfrienddogcare.co.uk/wp-content/uploads/2020/02/border-collie-.png"width="150"height="150"><input type="checkbox"></p>
        <p id="OptionTwo"><img src="https://dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg"width="150"height="150"><input type="checkbox"></p>
        <p id="OptionThree"><img src="https://www.pdsa.org.uk/media/6615/german-shepherd-gallery-1-min.jpg?anchor=center&mode=crop&quality=100&height=500&bgcolor=fff&rnd=132019595560000000"width="150"height="150"><input type="checkbox"></p>
        <p id="OptionFour"><img src="https://dogtime.com/assets/uploads/2016/09/beagle-puppy-5-e1568913038666.jpg"width="150"height="150"><input type="checkbox"></p>

I only want it possible for 1 answer to be optional out of each of these answers, I have 5 questions in total to do and couldn't get the radio button function to work for the whole quiz, hence the checkboxes instead.

I am suppose to be able to select an answer for all 5 questions then click on a link to view answers to then display all the correct answers on the next page as well as displaying how many questions were answered correctly.

I have never used either coding before this point so any help and explanations would be greatly appreciated.

Many Thanks, Laufeena

Upvotes: 0

Views: 96

Answers (2)

cobrexus
cobrexus

Reputation: 4806

Here is your HTML rewritten with JavaScript and CSS to include the basic required functionality, assuming that the answer to the first question is dog one.

Now you need to try and replicate this for the entire quiz.

const $form = document.getElementById('form')
const $dogOne = document.getElementById('dog-one')
const $results = document.getElementById('results')

$form.addEventListener('submit', (evt) => {
  evt.preventDefault()

  if ($dogOne.checked) {
    $results.innerHTML = '<p class="success">Correct!</p>'
  } else {
    $results.innerHTML = '<p class="fail">Nope. The correct answer was dog 1</p>'
  }
})
* {
  font-family: sans-serif;
  font-weight: 400;
}

.success {
  color: seagreen;
}

.fail {
  color: indianred;
}
<h2>Question 1</h2>

<h3>Which type of dog would you expect to find on a farm?</h3>

<form id="form">

  <lable>
    <img src="https://www.mybestfrienddogcare.co.uk/wp-content/uploads/2020/02/border-collie-.png" width="150" height="150">
  </lable>
  <input type="radio" id="dog-one" name="dog">

  <label>
    <img src="https://dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="150" height="150">
  </label>
  <input type="radio" id="dog-two" name="dog">

  <label>
    <img src="https://www.pdsa.org.uk/media/6615/german-shepherd-gallery-1-min.jpg?anchor=center&mode=crop&quality=100&height=500&bgcolor=fff&rnd=132019595560000000" width="150" height="150">
  </label>
  <input type="radio" id="dog-three" name="dog">

  <label>
    <img src="https://dogtime.com/assets/uploads/2016/09/beagle-puppy-5-e1568913038666.jpg" width="150" height="150">
  </label>
  <input type="radio" id="dog-four" name="dog">

  <br /><br />
  <div id="results"></div>
  <br /><br />
  <button id="submit">Submit</button>

</form>

Upvotes: 1

ReallyMadeMeThink
ReallyMadeMeThink

Reputation: 1071

You need to group radio inputs with the same name in order to get the functionality you want, for example:

<input type="radio" name="q1">
<input type="radio" name="q1">
<input type="radio" name="q1">

<input type="radio" name="q2">
<input type="radio" name="q2">
<input type="radio" name="q2">

Here, you'll only be able to select 1 option from q1 and 1 option from q2.

Upvotes: 0

Related Questions