Step 5: Set up results

In this session, you’ll learn to set up your results pages. This is where your audience will see their score and any other elements you choose. In this step, we:

• set up two result pages
• adjust scoring
• add media
• edit the layout of the result pages

Transcript:
Hi everyone. In this video, we’re going to set up our result pages together. Here you can see an example of a result page. You’ve got the score, an image, some text as well as some buttons at the bottom. So let’s go right into the Riddle Creator and make these together. By default in a Riddle quiz, you already have two result pages set up for you. One for a lower score and one for a higher score. So you can leave these as they are. They’re ready to go but We’re going to edit them a little bit so that they match the riddle that we’ve created. So let’s go into that first result page. And what I’d like to do first of all is create a little bit of space so that when I add or delete or move around elements here on this result page, I’ve got a bit more space to do that.

So you can use these arrows bottom right and click, drag and drop. down or up to reduce or increase the space. Okay, now I’m going to move everything down a bit. So click on an element and then click on these dots on the left and then you can drag and drop that too. Same thing here. Click, click on the six dots and drag it down. Okay, now I’d like to make this score a little bit smaller. So I’m going to click on that element and use the guideline dots to change the size to what I’d like. Maybe move it in here a little bit. And I like optimizing the score the way it’s formatted by clicking on the edit icon and enabling fill circle to grid size. And that gives it a nice fullness.

Okay, now I want the image. So scroll down and click on add. And then select Media. Click on Add Media. And under Pexels, I would like something for travelling. So select the image that you would like, as always, like we did in all the other blocks. And that will be uploaded into your riddle. And I’d like to move that right up to the top. So again, click on the six dots, drag and drop to the position that you would like. And you can see it’s covering the score now. What you can do is move this back so that it’s in the background and the score comes forward. So, you need to use this icon here. And now the score automatically comes forward.

Let’s stretch this image a bit to the right, to the left, and to the top so that it’s really filling the space that we have there. So again, use these toggles on the left and right as well as the top. Okay. Looking good. And perhaps I’ll move this ‘Show Your Result’ buttons up a little bit more so that we don’t have too much white space in between. And now I’ve got that, I want to get rid of this white space at the bottom. So I’m going to click on these arrows again, drag and drop this up. Maybe a little bit more. Okay. Let’s have a look at the preview. Great. That’s what we want. Score, image, the text down here and these buttons. The play again button is there automatically.

You don’t have to set that up. If you wanted to switch it off, you could, but it’s there ready to use and play again. Okay, now you can do all this again for the other result page or as many result pages as you like. Or you could duplicate this one so that you’ve got all the design elements ready to go for the other one and you can just edit. So let’s do that. Saves a lot of time. Click on the three dots here and click on duplicate. Now we have two exactly the same. And from the styling, that’s what I want. But I just want to change the text so that I’ve got one for the lower scores and one for the higher scores.

you can create your own text or I’m going to copy and paste the original from here copy and paste into this text block here okay and I want to delete the original white and black one click on the three dots there click on delete and now I have my two result pages By default, the scoring is set up so that 0 to 50% would get the first page and 51 to 100% would get the second page. You can leave this as it is or change it. And you can do that here. Click on branching logic and results. And under results, you can now see two score ranges. If you click on the edit button, you can change this around to suit your exact needs. But now you have it, you have your result pages. So feel free to play around with that a little bit. And in the next video, we’re going to do some editing and setting set up for the final touches for your riddle.