Widgets break my quiz

Hi jamespond,
1. In the ~5 minutes I was looking at you site, the issue of widgets being misplaced seems to have been resolved – so I’m assuming you fixed the issue on your site on your end :). I saw the issue when I first when to the site, but am no longer seeing it.

2. Resizing can be done super easy with CSS.

Please add the following CSS to your theme’s style.css

.hdq_quiz{max-width: 100% !important}; that will force the quiz to fill the width with your content. Feel free to play around with the 100% number until you find something that works well for your theme.

3. Wrong answer explanations is already built in! Please check the “extra” tab on the question edit page. There is an editor for “text that appears if answer was wrong”. There is also a quiz setting that forces this to always appear – so even if the user gets the question right.

4. Lastly, I noticed you have the results set to display below the quiz. Unfortunately there is a known bug with this feature where the site will not correctly scroll to the results. This has already been fixed for the next release of HD Quiz – which will be released in the next couple of days (probably Monday). I recommend setting the results to display above the quiz until the next update.

Wow, that was a quick reply. Yes, I found the answer explanation, I missed it first time. Thanks for the CSS, it works fine on my desktop but scaling also applies to mobile browsers. If I set it to 85% it looks fine on a computer screen but then scales to 85% on my mobile instead of filling the screen width there – is there a separate CSS for both?

My other widgets still break the quiz into parts (the facebook comments and related posts show few times in wrong places instead of just once on the very bottom of the post). I have taken a screenshot:

View post on imgur.com

Fist question is paginated, then other 3 aren’t (just for testing) but it shows what I mean.

Apart from those 2 issues it’s my favourite quiz script so far, and I tried about 15. There’s one important thing I was looking for and many of them fail: my wp-admin directory is password protected on the server for extra security. Many quiz scripts don’t work with it and display authentication prompt, yours doesn’t have this issue. ??

Hi James, you can do the following to separate desktop and mobile CSS

.hdq_quiz{max-width: 80% !important}

@media (max-width: 800px) {
    .hdq_quiz{max-width: 100% !important}
}

This will set width to 80% on screens over 800px, and 100% if lower. The perfect number will depend on your own theme and where it’s break points are, but 800 is a good start and is lily to work fine for you.

I’m actually still not able to see the widget problem anymore. Since I saw it when I first went to your site, it leads me to believe the issue might have been a temporary page caching issue on your site. The quiz is looking and working great on my end – both on my desktop and phone, and using every browser I have.

Try clearing your browser cache and see if that fixes it for you. On most browsers this can be done by going to the page, then pressing CRTL+F5.

If that doesn’t work, then I’m not sure how much more help I’ll be able to be. Taking a look at your site, I’m not seeing any formatting or weird CSS rules that would cause any issues. Please keep me posted!

Scratch that! I see the problem! The widgets appear again inside the results section.

This is unfortunately something I have ZERO control over, because these other plugins are hooking directly into WordPress’ the_content filter to add their own content. Basically, you have these plugins set to automatically add their stuff to your pages and posts. The way they do this is by looking for ANY call to the the_contet(), but instead of being smart and only running once per page, they are super aggressive and run every time, no matter what!

Once again, there is nothing I can do to stop this – it’s these other plugins that are doing this, not HD Quiz.

However, we can mitigate the issue a lot, by adding some more CSS!

.hdq_results_inner #wpdevar_comment_4,
.hdq_results_inner #wpdevar_comment_3,
.hdq_results_inner .crp_related {
   display: none !important;
}

This does NOT stop these widgets from loading inside of the results, but it should at leaste hide them so that they’re not visible

• This reply was modified 4 years, 7 months ago by Harmonic Design. Reason: fix css