Most intuitive way of displaying Quiz Questions and Answers

November 7, 2011 1:28 PM

I run a monthly Pub Quiz and I have a website, running on Wordpress which I use for announcing upcoming quizzes, publishing results and past questions / answers. At the moment I publish the questions and answers (50 per month) as separate blog posts with a category of Question or Answer tagged with the month and year. Is there a smarter, more intuitive way of doing it?

At the moment there is a list of 50 questions with a link after every 10 round of 10 questions to another blog post which contains the answers. I'm not sure what the best solution would be, whether questions and answers on the same page would be easier, or to have the answers appear in-line using javascript or whether my existing system is fine.

Does anybody know of any innovative or intuitive ways of displaying large amounts of questions / answers that I could use with Wordpress? I know enough HTML / PHP / CSS to hack the theme if necessary.

posted by jontyjago to Computers & Internet (5 answers total)

Best answer: I did this a long time ago and just used a style switching little piece of javascript which made it really stupid simple and then everything could be on one page. You can see the really basic setup here. Page is like nine years old, but it's super simple. I think I used this to set it up initially. The answers are, in this case, hidden using CSS so they're still there. So this is no good for asking the questions but that doesn't sound like it's what you're doing.
posted by jessamyn at 2:04 PM on November 7, 2011

so you have 100 posts per month
- 50 tagged with question
- 50 tagged with answer
- 100 tagged with MONTH-YEAR

There are so many ways to slice this up my head hurts!

What I would do if I were you is get out a sheet of paper and "wireframe" up how the archive looks when the person visits the page, and how you want to trigger the question answers to be visible.

I think the right approach is to alter your "monthly" archive page with whatever layout you want. There will need to be a mechanism for interrelating question and answer - is it just sequential? you post jan 1 with a question, then an answer the next day, then a new question the day after that, etc. If so then a custom, non-reverse order query for your archive page will do it.
posted by artlung at 2:08 PM on November 7, 2011

My opinion! (surely the best one)

Have a separate, interlinked post for each round. Or use the Organise Series plugin to link them up easily.

I'd probably make the quiz posts a custom post type. I'd use Advanced Custom Fields to define 10 question fields and 10 answer fields. (Optionally you could use the excellent repeater add-on, but that's not free.) Then I'd make a custom template for said post type that laid out the question and answer in a very pretty manner, using some javascript (try jQuery if you find JS intimidating) to reveal the hidden answer upon clicking. Maybe have a reveal all button at the bottom of the questions, for the impatient user.

Then, with a bit of PHP, you could also have a post that pulled in all the relevant fields from all the posts of that month, giving your users the best of both worlds.

As I said, just my opinion, but I think that could be a really nice solution.
posted by Magnakai at 2:44 PM on November 7, 2011

Response by poster: Artlung - I think I didn't explain things very well - after the quiz night I'm publishing 2 posts a month, one contains that night's 50 questions and one contains the 50 corresponding answers and I'm looking for a way to present them in a nicer way - to be honest I think jessamyn's 9-year old solution is perfect, but I'll look into Organise Series as it could be useful! Thanks all!
posted by jontyjago at 3:05 PM on November 7, 2011

I think it's a matter of creating a view that interleaves the question and answer posts. I think you want to do this on the tag page. Here's some possible code to get a view of the tag that includes both:

<?php

// archive.php
// Note this is not tested code, but it would be a start
if (is_tag()):

	$question_post = '';
	$answer_post = '';

	$request = explode('/', $_SERVER['REQUEST_URI']);
	$tag = $request[3];
	$settings = array(
		'posts_per_page' => -1,
		'tag' => $tag
		'order' => 'desc'
		'orderby' => 'date'
	);
	query_posts( $settings ); 
	
	while (have_posts()) :
		the_post();

		if (in_category('Answer')):
			$answer_post = get_the_content();
		endf;

		if (in_category('Question')):
			$question_post = get_the_content();
		endf;
	endwhile;

	print "<div class=\"the-questions\">";
	print "<h2>Questions from {$tag}</h2>";
	print $question_post;
	print "</div>";

	print "<div class=\"the-answers\">";
	print "<h2>Answers from {$tag}</h2>";
	print $question_post;
	print "</div>";

endif;

?>

From there I think it would be some jQuery. WordPress has jQuery built in, adding wp_enqueue_script('jquery'); in functions.php.

Here's what the jQuery/HTML is like:

<script>
var QUIZ = {
	questions: [],
	answers: []
};
jQuery(document).ready(function(){ 

	jQuery('.the-questions p').each(function(){
		QUIZ.questions.push(jQuery(this).html());
	}).closest('div').hide();
	jQuery('.the-answers p').each(function(){
		QUIZ.answers.push(jQuery(this).html());
	}).closest('div').hide();

	if (QUIZ.questions.length != QUIZ.answers.length) {
		alert('not the same number of questions as answers!')
	} else {
		
		jQuery('<dl />').attr('id', 'combined').appendTo('body');
		
		for (var i = 0; i < QUIZ.questions.length; i++) {
			jQuery('dl#combined').append('<dt><a href="#">show</a> '+QUIZ.questions[i]+'</dt>');
			jQuery('dl#combined').append('<dd style="display: none">'+QUIZ.answers[i]+'</dd>');
		}
		
		jQuery('dl#combined dt a').bind('click', function(){
			var innerText = (jQuery(this).text() === 'show') ? 'hide' : 'show';
			var idx = jQuery(this).index('dl#combined dt a');
			jQuery(this).text(innerText);
			jQuery('dl#combined dd:eq('+idx+')').toggle();
			return false;
		});
		
	}

});
</script> 

<body>
	<div class="the-questions">
		<h2>Questions</h2>
		<p>Here's a question 1</p>
		<p>Here's a question 2</p>
		<p>Here's a question 3</p>
		<p>Here's a question 4</p>
	</div>

	<div class="the-answers">
		<h2>Answers</h2>
		<p>Here's an answer 1</p>
		<p>Here's an answer 2</p>
		<p>Here's an answer 3</p>
		<p>Here's an answer 4</p>
	</div>
</body>

posted by artlung at 9:51 PM on November 7, 2011