The Quiz Builder widget is a flexible tool that allows you to create easy to use quizzes in your eBooks created with iBooks Author. We want to show you just how easy it is to create a customized quiz widget that feels right at home in one of the free iBooks Author templates. The tutorial is broken down into these 5 easy steps:
Lets get started. First open up iBooks Author and choose the “Classic Text” template from the Portrait section of the template chooser in iBooks Author.
Now that we have our template lets look at copying the style into the widget. Firstly we need to grab some images from the book so that we can reuse them in our widget. The easiest way to do this it to take a screenshot of graphics from the book.
You can take a screenshot in OSX by pressing cmd, shift and 4 at the same time. Once you’ve pressed this combination your cursor will change to cross-hair. You can now drag an area of the screen to take a picture of it. Once you’ve finished dragging the area that you highlighted will appear on your desktop. Why don’t you take a practice shot?
Now that we know how to take screenshots, we can grab some assets from the book. Firstly we want a standard header for our quiz so create a new blank page, type in ‘CINDERELLA’ in the red title text box and screenshot it, along with the gray line underneath. Next, delete everything so that you’re left with a blank page and then take a screenshot of the background. That’s it! We can now use these to make our widget blend into our book.
To make our text match those used in the book we need to customize the fonts to complete our look and feel. We’re only going to use the first two header styles so we only need to deal with these. We have chosen similar colors and fonts to those used in the book. (Not all the fonts available in iBooks Author are available in our widgets at the moment, so sometimes we will need to substitute some fonts for similar ones). Below are the settings we’ve used for the H1, H2 headings and Body:
2. Adding Questions
Now that we’ve styled our widget we can start to put some questions in. From here on we don’t need to change the styling at all as we’ve done it all already! Let’s create our first question by first clicking on the blue add question button in the Quiz Builder Generator (a dark blue + icon). This reveals a number of question types for you to choose from, which include multiple choice, multiple selection, text field, textbox, photo and audio. Choosing any of these options will automatically add a question to you quiz. For the purposes of this demo we’re going to choose the blank question option. I’m also going to choose ‘fullscreen’ as my layout, leave the ‘Question width’ at it’s default setting, and set alignment to left:
We’re now going to use markdown and Bookry elements to build the quiz. Markdown is a simple formatting language that you can use to specify the final appearance of text. You can find any markdown you need by clicking on the “Need a little help with what to put in here?” link in the Quiz Builder Generator. So, lets start writing the first question and here’s the code we’ve used below…
[i image_i11.png] ### Question [q] of [q total]
What we’ve done here is added a title graphic that says Cinderella (this is image_i11.png). To upload the image we started to type “[i” and the upload dialog came up for me. Handily it pre-fills the rest of the line for us. Then we added the question number. Here’s the result from that little bit of code:
Excellent! It looks like the book! This is the effect that we are after. We can now continue by adding a little bit of blurb to the question and an image. The next bit of code to add under the title is this…
Cinderella had step-sisters. They gleefully planned their wardrobes for the ball and taunted Cinderella by telling her that she was not invited. [i image_i6.png height:250px]
The image we added here is one we found on openclipart.org and it just adds to the question to make it a little more interesting. Here’s the result so far…
Finally we need to add the actual question. We’re going to make this multiple choice. You can use the code below. Note how we’ve marked the correct answer with an “x”.
How many step-sisters did Cinderella have? [*] 1 [* x] 2 [*] 3 [*] 4
Now that we’ve added all this together our question should look something like this. Remember while you’re editing the question you can flick between “Preview” and “Edit” to see any changes immediately:
That’s our first question done! We’re going to copy and paste this first question over the next few pages and edit each question in turn. This is going to give us similar styling throughout the widget. To see the rest of the questions you can download the widget and try it out in a book on your iPad.
Tip: Quiz Builder also supports HTML elements in your quiz to change the layout. For example, why not try adding a simple table (in Question 5 of the tutorial example widget). Here’s the code and a screenshot of what it will look like in your quiz:
<table border="1" bordercolor="cccccc" cellpadding="8" cellspacing="8" width="100%" align="center"> <tr><th bgcolor="dad3bc">The Plot</th><th bgcolor="dad3bc">Story Name</th></tr> <tr><td>A young girl with beautiful long hair is locked up in a tall tower by an evil witch.</td><td>[_ "Rapunzel"]</td></tr> <tr><td>With the help of an evil imp a young girl spins straw into gold.</td><td>[_ "Rumpelstiltskin"]</td></tr> <tr><td>A princess is banished from her kingdom and taken in by seven dwarfs.</td><td>[_ "Snow White"]</td></tr> </table>
3. Setting Grading Options
Next we need to set automatic grading for our quiz. The default selections will allow the reader to check their answers after each question by tapping the blue ‘Check’ button at the bottom of the quiz page. If they get it wrong, the blue ‘Check’ button turns into a gray ‘Try Again’ button.
We’re going to leave these default settings as they are for this quiz, but you go ahead and choose the options that you need for your quiz.
4. Summary Pages
Now we need to style our Summary Pages. Summary pages are shown after the quiz has been completed by the reader. Which summary pages are available to you depends on your automatic grading settings. For our settings above they are:
If you try each summary page in the generator, you will see that there are examples pre-filled already. You will need to customize the text for your quiz. In this example we will need to change the ‘Unfinished’, ‘Correct’ and ‘Incorrect’ summary pages, so we’re going to copy some of the styling from our quiz questions and use some of the default text. Here is the markdown we put on those pages:
[i image_i11.png] # You need to answer all the questions to finish the quiz. ## Please go back and answer any questions you may have missed.
[i image_i11.png] [i image_i8.png height:250px] # Congratulations! You have completed the Quiz. ## Well done, you got [q correct] out of [q gradable]. [action button retry "Tap here to take the quiz again"]
[i image_i11.png] [i image_i10.png height:250px] # Well done, you have completed the Quiz. ## You got [q correct] out of [q gradable] correct. [action button retry "Tap here to try the quiz again"]
You could also consider adding a sharing button that lets the reader share a file you specify e.g. a PDF certificate on the ‘Correct’ page. To do that you would use the following markdown:
[share abc6 "Share this" button]
On typing “[share” the upload dialog pops up for us so you can browse your Mac for the file you wish to share. Now you’re widget is finished. You can either preview it using the ‘Preview’ tab in your browser, or download the widget to your iPad for testing.
Download a PDF reference sheet of Bookry Quiz Builder Markdown
5. Receiving Quiz Responses
Finally we need to ensure that we can receive reader responses for this Quiz. To do this we need to activate ‘Rooms’ in the widget. This ensures that all responses for a particular quiz are kept together and that we can access them in one report. We activate Rooms by doing the following:
- Tap on the Reader Cloud icon in the top black bar of the Quiz widget and login to Reader Cloud.
- Tap on ‘Create a Room’ and then enter a screen name.
- We’re then given a PIN for the room. Readers will need to enter this PIN into their quiz widget before starting the quiz.
Our readers can now complete the quiz at any time (they don’t have to actually be in the same room!) and we can check their responses by tapping on the ‘Dashboard’ link in the top black bar. On the Dashboard we can see a list of readers and their individual question answers. If the reader is online, we can also tap on a reader question number and see the same answer they entered!
If you want to use the same quiz with a different set of readers (e.g. a different class of students) then simply leave the room you just created, and go through the room process again to create a new PIN for that set of students. To receive student responses by email you need to tap on the export button in the top black widget bar and email yourself a copy of the report.
And that’s how to create a simple Quiz in 5 easy steps…
…so why not give it a try. You’ll find all the assets we used to create this widget, including a custom Quiz Icon (which the reader taps on the open the widget) in the tutorial folder on the right. You can also find the completed widget file in there too. We will be adding more question types to Quiz Builder in the coming weeks so please stay in touch via our newsletter, @thebookry and this blog. Have fun making your quizzes!