<div class="quiz quiz--graded-category" data-module="gradedCategoryQuiz">
<div class="quiz__questions">
<div class="question js-question" data-index="0">
<p class="question__eyebrow js-index-label">Question {0}</p>
<h2 class="question__title">In which county in Ireland was Marley & Me filmed?</h2>
<div class="grid-x grid-margin-x">
<div class="cell question__image">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
<div class="cell medium-6 answer js-answer" data-value="1" data-message="Correct :) Jennifer Anniston and Owen Wilson journeyed to beautiful Connemara to shoot part of the movie." data-category="">
<button class="answer__text-button">
<span class="answer__label">Galway</span>
</button>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<button class="answer__text-button">
<span class="answer__label">Down</span>
</button>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<button class="answer__text-button">
<span class="answer__label">Limerick</span>
</button>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<button class="answer__text-button">
<span class="answer__label">Waterford</span>
</button>
</div>
<p class="cell question__message js-message"></p>
</div>
</div>
<div class="question js-question" data-index="1">
<p class="question__eyebrow js-index-label">Question {0}</p>
<h2 class="question__title">Who is was the youngest Irish actor to be nominated for an Academy Award?</h2>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1555078243-f044dcc0cd4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Caitriona Balfe</p>
</div>
</div>
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1585937250791-efc81fc76e43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Colin Farrel</p>
</div>
</div>
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1574273443333-9af8d1c72583?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Domhnall Gleeson</p>
</div>
</div>
<div class="cell medium-6 large-3 answer js-answer" data-value="1" data-message="Correct" data-category="">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1560787139-1394d216a73e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Saoirse Ronan</p>
</div>
</div>
<p class="cell question__message js-message"></p>
</div>
</div>
<div class="question js-question" data-index="2">
<p class="question__eyebrow js-index-label">Question {0}</p>
<h2 class="question__title">Which one is Galway?</h2>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<div class="answer__image-button">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<div class="answer__image-button">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="Incorrect" data-category="">
<div class="answer__image-button">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
</div>
<div class="cell medium-6 answer js-answer" data-value="1" data-message="Correct" data-category="">
<div class="answer__image-button">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
</div>
<p class="cell question__message js-message"></p>
</div>
</div>
</div>
<div class="quiz__results js-results">
<div class="quiz-results" data-module="quizResults">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="quiz-results__content cell medium-6">
<div class="quiz-results__category js-results-category" data-category="" data-index="0">
<h4 class="quiz-results__eyebrow js-results-eyebrow">You scored {0} out of {1}!</h4>
<h2 class="quiz-results__title">What a disaster!</h2>
<div class="richtext ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere ornare odio sit non ut vel cum sed. Amet viverra nunc in tellus urna. Sodales augue neque nec tellus aenean magna nibh.</p>
</div>
</div>
<div class="quiz-results__category js-results-category" data-category="" data-index="1">
<h4 class="quiz-results__eyebrow js-results-eyebrow">You scored {0} out of {1}!</h4>
<h2 class="quiz-results__title">Not too bad!</h2>
<div class="richtext ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere ornare odio sit non ut vel cum sed. Amet viverra nunc in tellus urna. Sodales augue neque nec tellus aenean magna nibh.</p>
</div>
</div>
<div class="quiz-results__category js-results-category" data-category="" data-index="2">
<h4 class="quiz-results__eyebrow js-results-eyebrow">You scored {0} out of {1}!</h4>
<h2 class="quiz-results__title">You're awesome!</h2>
<div class="richtext ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere ornare odio sit non ut vel cum sed. Amet viverra nunc in tellus urna. Sodales augue neque nec tellus aenean magna nibh.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz quiz--graded-category" data-module="gradedCategoryQuiz">
<div class="quiz__questions">
{{#each questions}}
{{#ifEquals type "SingleImageFourAnswers"}}
{{> @cp-single-image-four-answers}}
{{/ifEquals}}
{{#ifEquals type "FourSmallImageAnswers"}}
{{> @cp-four-small-image-answers}}
{{/ifEquals}}
{{#ifEquals type "FourLargeImageAnswers"}}
{{> @cp-four-large-image-answers}}
{{/ifEquals}}
{{/each}}
</div>
<div class="quiz__results js-results">
{{> @cp-quiz-results hasCategories="true" results=results.categories}}
</div>
</div>
{
"button": {
"url": "#",
"text": "Show my results"
},
"questions": [
{
"type": "SingleImageFourAnswers",
"eyebrow": "Question {0}",
"question": "In which county in Ireland was Marley & Me filmed?",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1444663837429-d2d894a77c77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"answers": [
{
"text": "Galway",
"value": 1,
"message": "Correct :) Jennifer Anniston and Owen Wilson journeyed to beautiful Connemara to shoot part of the movie."
},
{
"text": "Down",
"value": 0,
"message": "Incorrect"
},
{
"text": "Limerick",
"value": 0,
"message": "Incorrect"
},
{
"text": "Waterford",
"value": 0,
"message": "Incorrect"
}
]
},
{
"type": "FourSmallImageAnswers",
"eyebrow": "Question {0}",
"question": "Who is was the youngest Irish actor to be nominated for an Academy Award?",
"answers": [
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1555078243-f044dcc0cd4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Caitriona Balfe",
"value": 0,
"message": "Incorrect"
},
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1585937250791-efc81fc76e43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Colin Farrel",
"value": 0,
"message": "Incorrect"
},
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1574273443333-9af8d1c72583?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Domhnall Gleeson",
"value": 0,
"message": "Incorrect"
},
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1560787139-1394d216a73e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Saoirse Ronan",
"value": 1,
"message": "Correct"
}
]
},
{
"type": "FourLargeImageAnswers",
"eyebrow": "Question {0}",
"question": "Which one is Galway?",
"answers": [
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1518005068251-37900150dfca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"message": "Incorrect"
},
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"message": "Incorrect"
},
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1576447846650-1b5a4a8fcd17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"message": "Incorrect"
},
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1585334644725-e0b49aa6cdce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 1,
"message": "Correct"
}
]
}
],
"results": {
"eyebrow": "",
"title": "",
"richtext": {},
"categories": [
{
"eyebrow": "You scored {0} out of {1}!",
"title": "What a disaster!",
"richtext": {
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere ornare odio sit non ut vel cum sed. Amet viverra nunc in tellus urna. Sodales augue neque nec tellus aenean magna nibh.</p>"
}
},
{
"eyebrow": "You scored {0} out of {1}!",
"title": "Not too bad!",
"richtext": {
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere ornare odio sit non ut vel cum sed. Amet viverra nunc in tellus urna. Sodales augue neque nec tellus aenean magna nibh.</p>"
}
},
{
"eyebrow": "You scored {0} out of {1}!",
"title": "You're awesome!",
"richtext": {
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere ornare odio sit non ut vel cum sed. Amet viverra nunc in tellus urna. Sodales augue neque nec tellus aenean magna nibh.</p>"
}
}
]
}
}
There are no notes for this item.