Support » Plugin: HD Quiz » Is it possible to have the featured image appear below the question?

  • Resolved monzab

    (@monzab)


    Hello,

    Is it possible to have the featured image appear between the question and the answers?

    For some of my questions I would need the question to appear first, then the featured image and then the multiple choice answers.

    Does the current version of the plugin have this option? If not, what code could I use to obtain this result?

    Thank you

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

    (@harmonic_design)

    Hi again monzab,
    this is unfortunately not a feature of HD Quiz and likely will not ever be.

    The good news is that it is still possible. The bad news is that it’s not the most intuitive solution and will require some extra work on your side.

    The Solution:
    CSS Grid to the rescue!

    Each question has a unique ID. So you will need get a list of the IDs of the questions you want to do this for. If you “inspect element” on the question, you will see that each question has a unique div ID, example “hdq_question_167”. We can use this ID to target this question only while leaving the others normal.

    The code:

    #hdq_question_167 {
        display: grid;
            grid-template:
                'question_title'
                'featured_image';
    }
    #hdq_question_167 .hdq_question_featured_image {grid-area: featured_image;}
    #hdq_question_167 .hdq_question_heading {grid-area: question_title;}

    The above CSS would switch the Featured Image and Question Title around only for the question with the ID of 167.

    If you need to do more than one question, you can either copy/paste the above code only changing the ID for each question, or you can “stack” them together like so:

    #hdq_question_167,
    #hdq_question_168,
    #hdq_question_169 {
    	display: grid;
    	grid-template:
    		"question_title"
    		"featured_image";
    }
    #hdq_question_167 .hdq_question_featured_image,
    #hdq_question_168 .hdq_question_featured_image,
    #hdq_question_169 .hdq_question_featured_image {
    	grid-area: featured_image;
    }
    #hdq_question_167 .hdq_question_heading,
    #hdq_question_168 .hdq_question_heading,
    #hdq_question_169 .hdq_question_heading {
    	grid-area: question_title;
    }

    I know that this can be a little confusing and tedious, so let me know if you need more help with this

    Thread Starter monzab

    (@monzab)

    Hello,

    Thank you so much for the code and for explaining what to do to obtain the result I want.

    Everything went smoothly and I have the featured image under the question, which for my users is more suitable.

    You can see the result here.
    https://imgur.com/a/9MSWHCX

    Thank you so much again.

    • This reply was modified 8 months, 1 week ago by monzab.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Is it possible to have the featured image appear below the question?’ is closed to new replies.