Skip to content Skip to main navigation Skip to footer

Questions that include an audio player have incorrect appearance

Welcome to QSM Support Forum. › Forums › QSM Pro Support › Questions that include an audio player have incorrect appearance

Viewing 15 posts - 1 through 15 (of 31 total)
1 2 3
  • Author
    Posts
  • January 30, 2020 at 2:29 pm #2141
    Bob EastonBob Easton
    Participant

    Applies to 6.4.1 and later
    As you might recall from previous problem reports, I manage a site that includes many quizzes which incorporate an mp3 audio file as part of the question. When working as desired an audio player appears on the question line immediately following the question number. (disclosure: a single style addition adds a 40px left margin to the audio player to give room for the question number)

    The last time this worked as we prefer was with version 6.3.4. (see first attachment)

    A bit of history…
    The audio players disappeared completely with versions 6.3.5, 6.3.6, and 6.4.0. This was due to the ‘mediaelement…’ scripts and style files completely omitted by the plugin.
    The players reappeared with version 6.4.1.

    Current problem: the audio player is no longer on the same horizontal line as the question number. (see second attachment) Now, the audio player falls to the next line, definitely no longer pretty.

    Problem source: common.css (new since 6.3.5) has one style declaration that forces display: block. That causes a wide element, such as the audio player to fall to the next line, such as when items that are too wide to float in a confined space fall down. That declaration is on line 16 of common.css: .mlw_qmn_question {display: block;}

    My resolution is to comment out that declaration. Doing without it does not adversely affect the rest of the quiz. Your testing with your own quiz test suite might suggest better resolutions.

    Attachments:
    You must be logged in to view attached files.
    January 30, 2020 at 6:39 pm #2148
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Bob,

    Thank you for providing us an in depth explanation of the issue.

    I have forwarded the concerns to our development team. I will keep you posted as and when I receive an update from the team.

    Regards,
    Kriti

    February 10, 2020 at 6:06 am #2255
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Bob,

    I have talked to the development team. According to them, it is happening because of few CSS styles and not because of programming issue.

    We need the quizz’s link so that they can look into the issue.

    Regards,
    Kriti

    February 10, 2020 at 3:29 pm #2267
    Bob EastonBob Easton
    Participant
    This reply has been marked as private.
    February 10, 2020 at 10:05 pm #2270
    Kriti SharmaKriti Sharma
    Keymaster

    Thanks for your valuable input.

    Regards,
    Kriti

    February 11, 2020 at 12:42 am #2275
    Bob EastonBob Easton
    Participant

    Thanks again Kriti,
    The QSM team is fortunate to have you in this support role.

    I am not going to remove my fix for the benefit of the developers. So, I can’t show you a live instance of the problem. You can see a live sample of a quiz that is working as I desire here.

    Nor do I have the time to create a sample site to show the problem.

    Instead, if any of the “not a programming issue” developers really want to understand the problem, here are the steps:

    1. Start up a new quiz.

    2. Add 1 multiple choice question that consists of an mp3 file and a single word, as shown in the attached quiz-question screen shot. (add answers as they desire).

    3. Change 1 quiz option: show the question number.

    4. Preview the result. Note that the audio player hides the question number.

    5. Now, add the following style:

    <style>/* make room for question number */
.mejs-container {
	margin-left: 40px;
}</style>

    Note that this is a style that overrides code in the “media element” stylesheets that WordPress includes as a result of the [audio ...] inclusion.
    Before the QSM change to common.css that one change was enough to place the audio player on the same line as the question number.

    6. Now, make one more style change. This one overrides the QSM common.css change to 

    <style>/* allow question nbr and audio player on same line */
.mlw_qmn_question {display: inline !important;}</style>
    Attachments:
    You must be logged in to view attached files.
    February 11, 2020 at 3:07 am #2278
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Bob,

    I apologize if you are not satisfied with our service. I will forward your response to the development team and we will try to fix this as soon as possible.

    Regards,
    Kriti

    May 30, 2020 at 2:28 am #4331
    Paul Borg-BarthetPaul Borg-Barthet
    Participant

    Hi

    I have a similar issues with the question numbers and the mp3 player.

    I am editing with Elementor on my wordpress website.

    I’d appreciate any assistance on this matter. Please see live sample below.

    Sample Online Test

    Attachments:
    You must be logged in to view attached files.
    May 30, 2020 at 9:49 am #4341
    Bob EastonBob Easton
    Participant

    Hello Paul,
    Bob Easton here. I am NOT part of QSM support, but another customer, just like you.
    The quiz format we use at evaeaston.com is a bit different than yours, but I think my solution will work for you as well.

    The problem is one of trying to get too much into one physical space. It’s like buying a 12 foot long piece of lumber and trying to carry it home inside your little Mini-Cooper. That mp3 player is the too-long piece of lumber. The code below reduces the size of the player, makes room for the question number, and gives it the ability to appear on the same line with the question number.

    You will need the ability to find and edit the style.css file for your site´s theme.

    /* make room for question number */
.quiz_section .mejs-container {
	margin-left: 40px;
}
/* allow question nbr and audio player on same line */
.mlw_qmn_question {display: inline !important;}

/* for audio in related lessons area */
.related .mejs-container {
	width: 75% !important;
	margin: auto !important;
}
    May 30, 2020 at 10:10 am #4342
    Paul Borg-BarthetPaul Borg-Barthet
    Participant

    Hello Bob

    Just pasted the above code into the style.css file on my site´s theme. Didn’t seem to do the trick.

    I just pasted it in at the end of the theme code. Is this right?

    I am using Astra theme.

    The player seemed unchanged.

    Thanking you in advance Bob!

    Paul

    May 30, 2020 at 10:14 am #4343
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Paul,

    If you use the following CSS code in Appearance -> Customize -> Custom css

    .mlw_qmn_question {display: inline !important;}

    It will make the q. no. and the ques text in the same line. However, it is not happening on your website. So, I request you to please check for plugin or theme conflict on your website. is to check for plugin conflict or theme conflict. To do this, disable all of the plugins at once and enable them one by one by checking which one is causing the conflict. If this does not resolve the issue, change the website’s theme to another theme and check whether the issue is resolved or not.

    Hope this will resolve the issue.

    Regards,
    Kriti

    May 30, 2020 at 10:49 am #4346
    Bob EastonBob Easton
    Participant

    Paul,
    The code I offered is css code and should go in the theme’s style.css file, not the functions.php file. … or more directly in a custom css file that some themes offer through the menu path Kriti suggested.

    Her answer is only one part of the solution, It enables the question number and question text to be on the same line. However, if that “text” includes a fixed-size object, such as the mp3 player, you’ll also need the code that resizes the player.

    May 30, 2020 at 4:45 pm #4349
    Paul Borg-BarthetPaul Borg-Barthet
    Participant

    Hi all

    Thanks for your help. It seems the webiste’s theme is the issue as I have tried it with another theme and it works fine.

    Paul

    May 30, 2020 at 6:38 pm #4353
    Kriti SharmaKriti Sharma
    Keymaster

    That’s great Paul.

    Best regards,
    Kriti

    July 23, 2020 at 10:42 am #5031
    Paul Borg-BarthetPaul Borg-Barthet
    Participant
    This reply has been marked as private.
  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 31 total)
1 2 3
  • You must be logged in to reply to this topic.