Scoring quiz without radio buttons

[Chavista]

I’m trying to make a quiz using PHP, jQuery (and possibly JSON), using values stored in a database. I want to hide the radio buttons (CSS > display: none), styling the answers to look like buttons (much easier to select than those tiny radio buttons). But when I zap the radio buttons, the JavaScript that scores the quiz no longer works.

Is there another way to score it using PHP?

I’ve seen the following code in a number of quiz tutorials, but I’m not sure if it works without radio buttons, and I’m not sure how to plug it in to my script.

$answer1 = $_POST['answers-1'];
$answer2 = $_POST['answers-2'];
$totalCorrect = 0;
if ($answer1 == "B") { $totalCorrect++; }
if ($answer2) { $totalCorrect++; }

I’ve also been told that answersArray.push(answ) might work. I Googled for information, but I’m not sure exactly how to write the array or how to make it work with my code.

I posted the HTML for a simple quiz (two questions with three possible answers each) below. Again, I’m just looking for a (hopefully simple) way to score the results that works without radio buttons. Do you think I’d be better off looking for a JS or jQuery solution?

<div id="quiz" rel="key">
  <ol>
    <li id="q1" class="Question"><span class="Q2">1. No one knows if there&#8217;s just one universe or a series of universes, sometimes referred to as a:</span>
      <ol>
        <li class="1-A">
          <div>
            <label> A.
              <input type="radio" name="q1" style="display: none;">
              multiverse </label>
          </div>
        </li>
        <li class="1-B">
          <div>
            <label> B.
              <input type="radio" name="q1" style="display: none;">
              parallel universe </label>
          </div>
        </li>
        <li class="1-C">
          <div>
            <label> C.
              <input type="radio" name="q1" style="display: none;">
              constellation </label>
          </div>
        </li>
      </ol>
    </li>
    <li id="q2" class="Question"><span class="Q2">2. A spaceship would reach the sun in about eight minutes if it was traveling at the speed of:</span>
      <ol>
        <li class="2-A">
          <div>
            <label> A.
              <input type="radio" name="q2" style="display: none;">
              sound </label>
          </div>
        </li>
        <li class="2-B">
          <div>
            <label> B.
              <input type="radio" name="q2" style="display: none;">
              gravity </label>
          </div>
        </li>
        <li class="2-C">
          <div>
            <label> C.
              <input type="radio" name="q2" style="display: none;">
              light </label>
          </div>
        </li>
      </ol>
    </li>
  </ol>
  <input type="button" value="Submit" class="submit" id="Submit2">
</div>

[Drummin]

Maybe something like this???
http://jqueryui.com/button/#radio

[Chavista]

Interesting; I’ll check that out. Thanks.

[Pepster]

IMO using the anchor tag is easier…This is a quiz that I wrote awhile back -

<div class="container span5 mainContent">
	<!-- The Question that is pulled in from PHP and jQuery -->
	<div class="questStyle">
		<h3 class="displayQuest">&nbsp;</h3>
	</div>
	<!-- The Possible Answers that is also pulled in from PHP and jQuery -->
	<ol class="possibleAnswers">
		<li><a class="answer1 row span12 clicked" href="#" data-answer="1"></a></li>
		<li><a class="answer2 row span12 clicked" href="#" data-answer="2"></a></li>
		<li><a class="answer3 row span12 clicked" href="#" data-answer="3"></a></li>
		<li><a class="answer4 row span12 clicked" href="#" data-answer="4"></a></li>
	</ol>
	<br>
	<div class="actionBar">
		<button class="nextBtn">Next Question</button>
	</div>

	<?php if ($pageTitle == "Online Movie Trivia") { ?>
	<div class="scoreboard">
		<!-- The Countdown Counter done in jQuery -->
		<div class="stopwatch">
			<p class="countdownClock">Time Left: <span class="timer"></span></p>
		</div>
		<!-- The Score done in jQuery -->
		<div class="scoreBox">
			<p class="score">Points: <span class="totalPoints"></span> </p>
		</div>  
	</div>	
	<?php } ?>		

</div>

The point I am trying to make is you can do the same thing either way, but my preference is doing it this way for me you can use the bullets to style you answers (a, b,c,d or 1,2,3,4 or even none).