Formatting and display question

  • stephunique

    (@stephunique)


    3 weeks ago

    Hello,

    I tried your demo test on a mobile device, and the 4 images appear separately over at a time in the page, so you have to scroll to see the other images. Is it possible to display the images in a grid of 2×2 tried and columns instead so no scrolling is needed?

    Also your description said we can make our own then – does that require CSS or other code knowledge? Is it compatible with all themes?

    Thank you

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter stephunique

    (@stephunique)

    3 weeks ago

    *Typo, I meant to say “make our own theme”.

    Could I also suggest a timer feature and a leaderboard?

    Thank you

    Plugin Author arisoft

    (@arisoft)

    3 weeks ago

    Hi

    • The following code can be added to “ARI Stream Quiz -> Advanced -> Custom CSS styles” parameter to show 2 images per row on mobile devices:

    @media (max-width: 480px) {body .asq-theme.asq-theme-buzzfeed .quiz-question-has-image-answer .answer-col-2 .quiz-question-answer-holder,body .asq-theme.asq-theme-buzzfeed .quiz-question-has-image-answer .answer-col-3 .quiz-question-answer-holder,body .asq-theme.asq-theme-buzzfeed .quiz-question-has-image-answer .answer-col-4 .quiz-question-answer-holder {flex: 0 0 calc(50% - 1px); }}

    • A new theme creation requires a little knowledge of CSS/HTML/PHP. It is described here.
    • Timer and leaderboard are not supported.
    • This reply was modified 3 weeks ago by arisoft.
    Thread Starter stephunique

    (@stephunique)

    2 weeks, 6 days ago

    Hello,

    Thank you for such a fast response. I tested the code on a quiz I created on my own site, but the images still show one after another. In the General settings, I have set it to 2 images per row as well.

    I have also discovered that when I make a quiz that has more than one correct answer, the quiz only gives you the opportunity to select 1 answer. If you select one of the several correct answers, it will mark the whole question correct.

    I have WordPress 6.5.5 and Ari Stream Quiz 1.3.4 and am using Blogza theme version: 0.5 by Themeansar.

    Plugin Author arisoft

    (@arisoft)

    2 weeks, 6 days ago

    Is it possible to see the problem anywhere with images position?

    Free version doesn’t support ability to create questions with multiple choice for trivia quizzes. This feature is supported by PRO version. Free version will mark user answer as correct if any correct answer is selected.

    Thread Starter stephunique

    (@stephunique)

    2 weeks, 6 days ago

    Hello,

    It is fine if multiple selection is an upgrade, I didn’t realise this and thought it was a bug.

    Regarding your first sentence, did you mean you want to see a screenshot to see what it it looks like?

    Here is a screenshot:

    On a desktop computer: https://prnt.sc/Mb5Uqo8yHnPp (You can see the image is massive and does not look very good)

    On mobile: https://prnt.sc/ZDU8GNafvwOZ (see that it is one column and the images are large and full width on a mobile device)

    Here is a screenshot of my settings: https://prnt.sc/69TE8X2mh7-G

    Also, your desciption says you can add personality quizzes but I have not seen how to do that – all questions require a “correct” answer?

    Sorry for the multiple edits, it’s late for me here, I confused myself with a few things so had to edit my post several times.

    Thank you.

    • This reply was modified 2 weeks, 6 days ago by stephunique. Reason: Add detail
    • This reply was modified 2 weeks, 6 days ago by stephunique. Reason: Corrected the screennshots and added new issue
    • This reply was modified 2 weeks, 6 days ago by stephunique. Reason: Correct an error I made regarding what I need help with
    Plugin Author arisoft

    (@arisoft)

    2 weeks, 6 days ago

    We mean a link where possible to see the problem so we can investigate it. You can send it by email: info (at) ari-soft (dot) com

    Thread Starter stephunique

    (@stephunique)

    2 weeks, 6 days ago

    Hello Ari Soft,

    Sory I misundersood what you meant. I have emailed you at the above address with the link.

    Plugin Author arisoft

    (@arisoft)

    2 weeks, 5 days ago

    Sorry, our bad. The code should be:

    @media (max-width: 480px) {body .asq-theme.asq-theme-buzzfeed .quiz-question-has-image-answer .answer-col-2 .quiz-question-answer-holder,body .asq-theme.asq-theme-buzzfeed .quiz-question-has-image-answer .answer-col-3 .quiz-question-answer-holder,body .asq-theme.asq-theme-buzzfeed .quiz-question-has-image-answer .answer-col-4 .quiz-question-answer-holder {width: 50%; }}

    Thread Starter stephunique

    (@stephunique)

    2 weeks, 5 days ago

    Hello,

    Thank you for this code, it works, now it displays image answers in a grid of 2×2 on a mobile device.

    However on a desktop browser the images are still massive and spread out the full width of the page, This is true even for the multiple choice options – the stretch out the full width of the page like this https://prnt.sc/NrvyA01gUJch and doesn’t look great and the second row of the image options are below the fold. Can you suggest something to make it look a bit more user friendly?

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