The Quiz element is breaking

Hi dguin111,
I took a look and there is a lot of… interesting things going on with your site’s HTML and CSS. It’s the insane amount of errant CSS that is breaking some things of HD Quiz, such as the quiz timer position.

For example, the timer needs to have the property “fixed” so that the timer overlays the site and will always be visible on the bottom right of the page. However, due to the many many layers of nested HTML properties and your site’s current CSS, one of these elements is breaking the positioning on your site.

Let me know if you are comfortable with this, but if you want, you can contact me at harmonicdesign.ca and grant me login access to the site. I’ll poke around and see if I can clean up any of the low hanging fruit for you.

If not, we can still use some custom JavaScript to position some of the elements for you the correct way. Let me know!

EDIT: Oh, and each quiz is wrapped in a div with classname hdq_quiz_wrapper and an ID of hdq_xxx where xxx is the ID of the quiz

• This reply was modified 4 years, 11 months ago by Harmonic Design.

Adding the following code to your theme’s functions.php will help solve the timer position issue (but not your other issues), but please note that I strongly recommend also doing the following.

The timer begins once the page and HD Quiz have loaded. Since your timer is so short (only 30 seconds) and you have so much content for the user to read before they even get to the quiz, I recommend adding the quiz to its own page without that extra content / intro text, then linking to that quiz.

So, on the current page, keep everything where it is, except in place of where the quiz currently is, just have a button/link that says “Start Quiz” or something. This button will then link to a new page that has the quiz.

function hdq_dguin111_timer()
{ ?>

<script>
jQuery(document).ready(function() {

    const hdqtimer = document.getElementsByClassName("hdq_timer")[0];

    hdqtimer.style.zIndex = "999999";
    hdqtimer.style.left = 5 + "px";

    jQuery(window).scroll(function(e){
        if(window.innerWidth > 800){
            hdqtimer.style.top = (window.innerHeight / 2) + jQuery(this).scrollTop() - 270  + "px";
        } else {
            hdqtimer.style.top = jQuery(this).scrollTop() - 270  + "px";
        }
    })
});
</script>
<?php
}
add_action("hdq_after", "hdq_dguin111_timer");

That code will add some custom JavaScript to pages that have a quiz on them. This code is specific to your theme. It first calculates what the width of your site is (so that it works across every screensize), taking into account the overflow you have (your site has lots and lots of overflow. It’s technically twice as wide as it appears!), and then does the same for height + current scroll position. Then every time the page scrolls, the code recalculates the new position and places the timer where it works best.

• This reply was modified 4 years, 11 months ago by Harmonic Design.

Thank you so much.

Actually the timer and the time 30secs is not that important, can be removed.

I am using the tagdiv Newspaper theme and I think their coding has become more complex recently with the introduction of cloud themes…

I want to give you direct temporary access to identify the problem (which I can notify the theme support) and if possible solve it… but for that, I need any email id of yours where I can mail you the direct link…

Thanking you,

Dev.
my email: [email protected]

I’ve sent off an email ??