Prev / next question buttons

  • Resolved jurasjo

    (@jurasjo)


    3 years, 8 months ago

    Hi
    I would like to change the order of prev/next buttons on question page in a quiz. it should be as easy as using this simple jQuery code:

    jQuery( document ).ready(function moveNext() {
    jQuery( '#llms-next-question' ).insertAfter( '#llms-prev-question' );
  });

    It works when pasting/executing it in the browsers Console but when I put it into the .js file it doesn’t work. Looks like LifterLMS creates/manipulates those buttons using JS function and not a “html” way. Any advice how to achieve what I want?

    Br

Viewing 2 replies - 1 through 2 (of 2 total)
  • Natalie

    (@nrherron)

    3 years, 8 months ago

    Hi @jurasjo

    Thanks for reaching out.

    We have some CSS you can use to swap the order here:

    
/* Move buttons on the right */
#llms-quiz-nav button {
    float: right;
}
/* Prev question button on the left */
#llms-quiz-nav #llms-prev-question {
    float: left;
}
/* Ensure quiz counter is displayed on a different line */
.llms-quiz-ui .llms-quiz-counter {
    width: 100%;
    text-align: right;
}
footer#llms-quiz-nav::after {
    display: block;
    content: '';
    clear: both;
}

    If you have any further questions please let us know.

    All the best,

    Thread Starter jurasjo

    (@jurasjo)

    3 years, 8 months ago

    Thanks. I have modified your code a little and ended up wit this one:

    #llms-quiz-nav {
	text-align: center;
}

@media only screen and (max-width: 599px) {
	#llms-quiz-nav #llms-prev-question,
	#llms-quiz-nav #llms-next-question,
	#llms-quiz-nav #llms-complete-quiz {
		width: 85%;
	}
}

/* Move buttons on the right */
@media only screen and (min-width: 600px) {
	#llms-quiz-nav #llms-next-question,
	#llms-quiz-nav #llms-complete-quiz {
    float: right;
	}
}

/* Prev question button on the left */
@media only screen and (min-width: 600px) {
	#llms-quiz-nav #llms-prev-question {
    float: left;
	}
}

/* Ensure quiz counter is displayed on a different line */
#llms-quiz-counter {
    width: 100%;
    text-align: center;
}

#llms-quiz-counter::before {
    display: block;
    content: '';
    clear: both;
}
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Prev / next question buttons’ is closed to new replies.