Go to question list

Ummm… this is kind of possible.

There are two ways to do it. The first is with a good old fashioned named link. Each question is wrapped in a div with a unique ID, for example hdq_question_1 for the first question and hdq_question_12 for the 12th question.

What this means is that you can create a link <a href = "#hdq_question_12">Question 12</a> that when clicked on, would automatically scroll down the page to that question.

The problem is that you are using the pagination feature, so scrolling to the div isn’t enough as the question would still be hidden. So for this, we need to create some custom JavaScript.

So I would recommend creating a custom shortcode that you can add before the HD Quiz shortcode. This shortcode would, for example, be a number input where the user can enter the number of the question they wish to “jump” to. Once this number has been submitted, you should run a JavaScript function to hide all questions, and then show the question that has the ID hdq_question_ + whatever the inputted number is.

So there are lots of ways to do this, but it depends on how you want your user to select the question.

Also, just my thoughts, but looking at your quiz – your H3 tags are HUGE. If you want to make question titles smaller, I’d recommend adding the following CSS to your theme.

.hdq_quiz_wrapper h3 {
    font-size: 1.2rem;
}

This is completely personal taste, but IMO this would look nicer 🙂