HD Quiz

Hi Josh,
I deliberatly chose to keep the timer visible on quiz completion so that A) when a user completes a quiz, they can see how much time they had left, and B) if the timer runs out and the quiz ends, having the timer still remain visible lets the user know why the quiz ended – otherwise it could feel like a bug if they didn’t notice.

I like the idea of adding a complete class to the timer as it would be usful to do things like hide or even reposistion the timer once the quiz has completed.

In the meantime, you can use JavaScript to add a custom class yourself. This can be done by using the hdq_submit action to automatically run a JS function that adds a class to the timer.

Something like:

function hdq_submit_add_class_to_timer($quiz)
{
    array_push($quiz->hdq_submit, "hdq_submit_add_class_to_timer");
    return $quiz;
}
add_action("hdq_submit", "hdq_submit_add_class_to_timer");

function hdq_after_add_class_to_timer()
{
?>
    <script>
        function hdq_submit_add_class_to_timer() {
            const el = document.getElementsByClassName("hdq_timer");
            if (el.length > 0) {
                el[0].classList.add("hdq_timer_ended");
            }
        }
    </script>
<?php
}
add_action("hdq_after", "hdq_after_add_class_to_timer");

The first function tells HD Quiz to run a JavaScript function called hdq_submit_add_class_to_timer once a quiz completes.

The second function allows you to add custom content/code to any quiz. In our case, we are using to add that custom JavaScript function which adds a new class to the timer hdq_timer_ended

Thank you Dylan for the excellent code and explanations. 🙂 It worked right away when adding to my theme’s functions.php file.

“I deliberately chose to keep the timer visible on quiz completion so that A) when a user completes a quiz, they can see how much time they had left, and B) if the timer runs out and the quiz ends, having the timer still remain visible lets the user know why the quiz ended – otherwise it could feel like a bug if they didn’t notice.”

Was also pondering this when posting. Hiding the timer for me is still better. The very best case scenario would be a way for the timer to insert into it’s wrapper hdq_quiz_wrapper. I made two attempts with the following JavaScript but it’s not quite right:

// First attempt
function hdq_submit_add_class_to_timer() {
const el = document.getElementsByClassName(“hdq_timer”);
if (el.length > 0) {
el[0].classList.add(“hdq_timer_ended”);
var div = document.getElementsByClassName(“hdq_quiz_wrapper”);
div.innerHTML += el;
}
}

// Second variation
function hdq_submit_add_class_to_timer() {
const el = document.getElementsByClassName(“hdq_timer”);
if (el.length > 0) {
el[0].classList.add(“hdq_timer_ended”);
// Set timer inside quiz wrapper
var d1 = document.getElementsByClassName(“hdq_quiz_wrapper”);
d1.insertAdjacentHTML(‘afterend’, el);
}
}

I tried a few other variations but can’t quite get it. With the timer inside the quiz I could write some CSS such as relative position for the quiz wrapper followed by absolute for the timer so that it’s contained nicely inside the quiz.

Having the timer inside of the quiz wrapper by default is not something I will ever do because – and this is central to everything I do – HD Quiz needs to work for everyone. That incluides people with broken or poorly coded themes, or themes with weird/experimental layouts such as having their content inside of scrollable divs instead of the body scrolling. In these situations, having the timer inside the wrapper would break my ability to place the timer where it needs to be. A lot of people also use things like chatbots with the icons in the bototm right of the screen, so having the timer placement outside makes it easier to move to fix overlapping issues.

For an example of the styling issues I’m talking about, if I understand what you are trying to accomplish here, your problem is that you need to set the wrapper div to position relative 😉

Also, for your insertAdjacentHTML call, you are using afterend which means, after this ends, start new. I think you want beforeend instead.

Thanks Dylan for the reply and evaluation. What I’m simply trying to do is contain the timer within the quiz or stay by the quiz so that once you complete the quiz it doesn’t float around the entire post.

“Having the timer inside of the quiz wrapper by default is not something I will ever do because – and this is central to everything I do – HD Quiz needs to work for everyone.”

Understood.

“if I understand what you are trying to accomplish here, your problem is that you need to set the wrapper div to position relative”.

.hdq_quiz_wrapper has a position of relative by default. When setting the timer to relative it simply displays at the bottom of the post which is sorta like hiding it. I’m happy to display the timer but find it distracting after finishing the quiz to see it as I look through the rest of the post. I made a few modifications which seem closer but for some reason doesn’t insert it into the wrapper:

function hdq_submit_add_class_to_timer() {
const el = document.getElementsByClassName(“hdq_timer”);
if (el.length > 0) {
el[0].classList.add(“hdq_timer_ended”);
// Set timer inside quiz wrapper
var hdwrap = document.getElementsByClassName(“hdq_quiz_wrapper”);
var HDtimer = document.getElementsByClassName(“hdq_timer”);
hdwrap.insertAdjacentElement(‘beforeend’, HDtimer);
}
}
}

“I like the idea of adding a complete class to the timer as it would be usful to do things like hide or even reposistion the timer once the quiz has completed.”

Understood if this is rather tricky to accomplish in JavaScript. I’d be thrilled with native support for the completed timer class. 🙂

Thanks Dylan for adding this into HD Quiz! 🙂

I found a work around:
.hdq_timer {
transition: 10s all linear;
}

.hdq_timer.hdq_timer_complete {
visibility: hidden;
}