jQuery Mobile: Popup Widgets for Feedback in a Quiz

In my last post you learned how to create a multiple choice quiz with feedback. In that example the user clicks on their answer and after clicking the “Check Answer” button they are provided with the words “true” or “false” as a method of receiving immediate feedback.

Another way to provide feedback to the user after they select their answer is to use a jQuery Mobile popup widget. Furthermore, rather than using radio buttons you can render each possible answer as a button by using the data-role=”button” attribute along with creating a link.

The following code represents the section required for one of the possible answers, “client/server”, to a given question:

<a href="#q1b" data-role="button" data-rel="popup" data-position-to="window" data-transition="pop">client/server</a>  
<div data-role="popup" id="q1b" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;">  
<div role="main" class="ui-content">  
<a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-b" data-rel="next" data-transition="flow">Correct</a>  

The popup widget in this example, created by using data-role=”popup” in a div with an id, is a window with only a button which will open after the user selects “client/server” as their answer.  You use the same concept to build the contents of this window as you do with any jQuery Mobile “page”. For example, the button is placed within the main section using class=”ui-content”.

For this quiz example, the text “Correct” is attached to the answer and will therefore be displayed on the button. The other two possible answers will have the text “Incorrect” displayed on their respective button.

To close the window and display the next “page” the user will have to click on the button within the popup. The image below shows the popup widget opened after the user selects “client/server” as their answer to the first question in the quiz.

jQuery Mobile popup widget

The attribute, placed within the data-role of “popup”, which forces the user to click on the button is data-dismissible=”false”. If this attribute is not included then the window can otherwise be closed by clicking anywhere outside of the popup.

The button within the popup is created using the class=”ui-btn” and an anchor tag. It is the data-rel=”next” that moves the user onto the next question. You have the option of adding your choice of themes and transitions.

Note that this popup can contain a header, text within the main content and an icon, such as an ‘x’, to assist the user with what is expected of them in order to move onto the next question.


Comments (0)

Leave a Comment