Support » Plugin: HD Quiz » Scroll to next question

  • Resolved mulecow

    (@mulecow)


    I want all the quiz questions to be on the same page however I’d like the page to scroll down to the next question after each question is answered.

    Is this an option that will be added in future?

    Or would it be simple to add/edit a piece of code to achieve this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Harmonic Design

    (@harmonic_design)

    Hi mulecow,
    if you add the following to your theme’s functions.php file, you should get something close to what you are looking for. Just please note that there may be issues with this depending on what features you are using (such as ads, or pagination) so your mileage may vary.

    function hdq_mulecow_auto_scroll_to_next_question()
    {
    	?>
    
    <script>
    function hdq_mulecow_auto_scroll_to_next_question() {
    	const answers = document.getElementsByClassName("hdq_label_answer");
    	for (let i = 0; i < answers.length; i++) {
    		answers[i].addEventListener("click", hdq_auto_scroll);
    	}
    
    	function hdq_auto_scroll() {
    		let parent = this.parentNode.parentNode; // get the question
    		let next = jQuery(parent).next(".hdq_question")[0];
    		if (typeof next != "undefined") {
    			hdq_scroll_to_next(next);
    		}
    		async function hdq_scroll_to_next(next) {
    			console.log(next)
    			
    			let hdq_quiz_container = document.querySelector("#hdq_" + HDQ.VARS.id);
    			hdq_quiz_container = jQuery(await HDQ.get_quiz_parent_container(hdq_quiz_container));
    
    			if (hdq_quiz_container[0].tagName === "DIV") {
    				hdq_top =
    					jQuery(hdq_quiz_container).scrollTop() +
    					jQuery(next).offset().top -
    					jQuery(next).height() / 2 -
    					40;
    				jQuery(hdq_quiz_container).animate(
    					{
    						scrollTop: hdq_top,
    					},
    					550
    				);
    			} else {
    				let overflowH = jQuery("html").css("overflow");
    				let overflowB = jQuery("body").css("overflow");
    				let rest = false;
    				if (overflowH.indexOf("hidden") >= 0 || overflowB.indexOf("hidden") >= 0) {
    					rest = true;
    				}
    
    				jQuery("html,body").css("overflow", "initial");
    
    				jQuery("html,body").animate(
    					{
    						scrollTop: jQuery(next).offset().top - 40,
    					},
    					550
    				);
    
    				if (rest) {
    					setTimeout(function () {
    						jQuery("html").css("overflow", overflowH);
    						jQuery("body").css("overflow", overflowB);
    					}, 550);
    				}
    			}
    		}
    	}
    }
    hdq_mulecow_auto_scroll_to_next_question();
    </script>
    
    	<?php
    }
    add_action('hdq_after', 'hdq_mulecow_auto_scroll_to_next_question');
    mulecow

    (@mulecow)

    It’s working perfectly so far. Thanks for providing this addition so quickly.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.