Passing Database Value without a Form

[PHPBear]

I'm trying to make a quiz powered by PHP and jQuery, with all the data (questions, answers, ID's, etc.) stored in a database.

 

My current code attaches a radio button to each answer in a list...

 

<li class="Answer '.$QID.'-'.$Value.' '.$Correct.'" id="'.$QID.'"><label>'.$Value.'. <input name="q'.$QID.'" input data-key="'.$Value.'" type="radio"> '.$QA.'</label></li>

 

Taking a tip from a commercial quiz I saw online, I'd like to remove the radio button (and presumably the form it's a part of, using some CSS to make each answer look something like a button...

 

<li class="Answer '.$QID.'-'.$Value.'" id="'.$QID.'">'.$QA.'</li>

 

However, the commercial quiz is written in JavaScript, which is very hard for me to follow. So I'm trying to create something similar using more PHP (and jQuery).

 

I'm now trying to figure out how to "capture" a value for each question, based on the answer selected by a visitor. For example, let's say someone chose B as the answer to the first question. The ID ($QID) for that question and each associated answer is the numeral 1. The value for $QID-$Value for that particular answer is 1-B.

 

Let's say I create a variable - $Answer1 - to store an ID or value for a user's answer choice for the first question. So, in this case, $Answer1 = '1-B' (if we go with $QID-$Value) or simply 'B' if we just go with $Value.

 

I'm not sure exactly how to capture these values. I don't even know what I should be using - PHP, jQuery or AJAX. Just to get started, all I want to do is give $Answer1 the value for whatever answer the user chooses. So $Answer1 should equal 'B' in this case.

 

Can anyone tell me how to do that, or at least tell me if I should be using PHP, jQuery or AJAX to accomplish it? Thanks.

[ginerjm]

You talk about ceasing the usage of radio buttons to make selections but then you talk about (and show) a list item. How do you expect to get the user to recognize that a list element is a 'selection' and how do you expect to retain that knowledge? Or do you want the javascript to be triggered when focus (?) is obtained on each list item and do something then?

 

Me? I would use css-styled anchor tags inside the list items with no href attribute and just a js call attached to an event on the anchor. But you would also have to have some indicator to show what the user has already selected, no? And how about removing the selection when the user changes his/her mind?

 

Personally radio buttons make much more sense to the user.

[PHPBear]

You talk about ceasing the usage of radio buttons to make selections but then you talk about (and show) a list item. How do you expect to get the user to recognize that a list element is a 'selection' and how do you expect to retain that knowledge? Or do you want the javascript to be triggered when focus (?) is obtained on each list item and do something then?

 

Me? I would use css-styled anchor tags inside the list items with no href attribute and just a js call attached to an event on the anchor. But you would also have to have some indicator to show what the user has already selected, no? And how about removing the selection when the user changes his/her mind?

 

Personally radio buttons make much more sense to the user.

Yes, I have a lot of hoops to jump through. I've been trying to find a tutorial that covers all this stuff, but I haven't had any luck yet.

 

Good point about the radio buttons. It certainly wouldn't be much trouble to simply invite visitors to just "Click the Best Answer." But maybe it would still be better to retain the more familiar radio buttons.

[ginerjm]

You could still use my idea about anchor tags to tell the user to 'click the best answer'. JS attached to anchor tags. Each anchor tag having an id perhaps that holds the Q# and the answer code/value that your js then retrieves and breaks down

[PHPBear]

You could still use my idea about anchor tags to tell the user to 'click the best answer'. JS attached to anchor tags. Each anchor tag having an id perhaps that holds the Q# and the answer code/value that your js then retrieves and breaks down

I hate to sound stupid, but could you post an example of what such an anchor tag would look like, just to make sure I understand what you're suggesting?

Edited January 7, 2015 by PHPBear

[wezhind]

I'll let ginerjm explain the anchor tag, though I presume he means an <a> that you give an id containing the info you want i.e. the answer identifier ('1-b' ?). Personally I'd probably also give it a class name i.e. <a class="answer" id="..."><input type="radio"...

 

You could then use jQuery to grab the value (not my greatest skill so excuse any mistakes, but...) in a similar way to this..

$(".answer").click(function(e) {
    var answer_chosen = $(this).attr("id");
}

Though that method is really only if you need the value instantly (you could also fire the event on the <a> tag rather than using jQuery). If you don't need it 'instantly' then why not just post the form and then grab the data. I suppose I'm a little unclear as to your exact requirements. (I'll re-read your post in a min).

[ginerjm]

// in php mode here
"<li class='Answer$QID-$Value' id='$QID'><a href=# id='somecriteria' onclick='getAnswer()'>$QA</a></li>";

 

This is untested. The class in the li may be what you want to put into the id of the <a>. Your onclick event will call the js code that will extract the question and answer values from this.

[PHPBear]

Got it. I also found a demo for a JSON-based quiz @ http://www.meredithdodge.com/2012/03/16/tutorial-easy-jquery-based-quiz/ So I have several things to work with now.

 

Here's an example of a quiz without radio buttons -- http://codecanyon.net/item/jquizzy-classic-premium-quiz-engine/full_screen_preview/242295

 

However, I've come across a couple other discussions where people warned not including radio buttons would introduce a variety of problems.

 

Thanks again for all the tips.