1 files changed, 37 insertions, 12 deletions

diff --git a/plugins/jetpack/modules/shortcodes/js/quiz.js b/plugins/jetpack/modules/shortcodes/js/quiz.js
index 6ab6e1d1..5cdef1f3 100644
--- a/plugins/jetpack/modules/shortcodes/js/quiz.js
+++ b/plugins/jetpack/modules/shortcodes/js/quiz.js
@@ -1,17 +1,17 @@
-( function( $ ) {
-	$.fn.shuffleQuiz = function() {
+( function ( $ ) {
+	$.fn.shuffleQuiz = function () {
 		var allElems = this.get(),
-			getRandom = function( max ) {
+			getRandom = function ( max ) {
 				return Math.floor( Math.random() * max );
 			},
-			shuffled = $.map( allElems, function() {
+			shuffled = $.map( allElems, function () {
 				var random = getRandom( allElems.length ),
 					randEl = $( allElems[ random ] ).clone( true )[ 0 ];
 				allElems.splice( random, 1 );
 				return randEl;
 			} );
 
-		this.each( function( i ) {
+		this.each( function ( i ) {
 			$( this ).replaceWith( $( shuffled[ i ] ) );
 		} );
 
@@ -19,18 +19,15 @@
 	};
 } )( jQuery );
 
-jQuery( function( $ ) {
-	$( '.jetpack-quiz' ).each( function() {
+jQuery( function ( $ ) {
+	$( '.jetpack-quiz' ).each( function () {
 		var quiz = $( this );
 		quiz.find( 'div.jetpack-quiz-answer' ).shuffleQuiz();
-		quiz
-			.find( 'div[data-correct]' )
-			.removeAttr( 'data-correct' )
-			.data( 'correct', 1 );
+		quiz.find( 'div[data-correct]' ).removeAttr( 'data-correct' ).data( 'correct', 1 );
 		quiz.find( 'div.jetpack-quiz-answer:last' ).addClass( 'last' );
 	} );
 
-	$( 'div.jetpack-quiz' ).on( 'click', 'div.jetpack-quiz-answer', function() {
+	$( 'div.jetpack-quiz' ).on( 'click', 'div.jetpack-quiz-answer', function () {
 		var trackid,
 			answer = $( this ),
 			quiz = answer.closest( 'div.jetpack-quiz' );
@@ -65,3 +62,31 @@ jQuery( function( $ ) {
 		quiz.data( 'trackid', false );
 	} );
 } );
+
+document.querySelectorAll( '.jetpack-quiz-wrapper' ).forEach( function ( quiz ) {
+	quiz.childNodes.forEach( function ( element, number ) {
+		element.style.display = 'none';
+		element.setAttribute( 'quiz-number', number );
+		element.querySelector( '.jetpack-quiz-count' ).innerHTML =
+			number + 1 + '/' + quiz.childElementCount;
+	} );
+
+	quiz.childNodes[ 0 ].style.display = 'block';
+} );
+
+document.querySelectorAll( '.jetpack-quiz-option-button' ).forEach( function ( element ) {
+	element.addEventListener( 'click', function () {
+		var currentQuiz = element.parentElement.parentElement;
+		currentQuiz.style.display = 'none';
+		var switchNumber = element.getAttribute( 'data-quiz-option' ) === 'next' ? 1 : -1;
+		var newQuiz =
+			currentQuiz.parentElement.childNodes[
+				parseInt( currentQuiz.getAttribute( 'quiz-number' ) ) + switchNumber
+			];
+		newQuiz.style.display = 'block';
+		var newQuizQuestionEl = newQuiz.querySelector( '.jetpack-quiz-question' );
+		if ( newQuizQuestionEl ) {
+			newQuizQuestionEl.focus();
+		}
+	} );
+} );