<div class="quiz quiz--graded" data-module="gradedQuiz">
<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 :( Not Down." 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 :( Not Limerick." 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 :( Not Waterford" 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 :( Another message for an incorrect answer." 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 :( Not Colin Farrel." 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 :( Not Domhnall Gleeson." 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 :) Saoirse was just thirteen when she was nominated for her part in Atonement." 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 :( Another message for an incorrect answer." 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 :( Not Galway." 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 :( Not Galway." 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 :) This one is in Galway." 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__button-wrapper">
<a href="#" class="button-p1 button-p1--default quiz__button js-quiz-submit is-active disabled" role="button">Show my results</a>
</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">
<h4 class="quiz-results__eyebrow js-results-eyebrow">You scored {0} out of {1}!</h4>
<h2 class="quiz-results__title">That’s one well-versed audition! Take a bow!</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 class="quiz quiz--graded" data-module="gradedQuiz">
<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__button-wrapper">
{{> @cp-button-primary target=button.target url=button.url text=button.text modifier="default" cssClasses="quiz__button js-quiz-submit is-active" disabled="true" }}
</div>
<div class="quiz__results js-results">
{{> @cp-quiz-results results=results}}
</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 :( Not Down."
},
{
"text": "Limerick",
"value": 0,
"message": "Incorrect :( Not Limerick."
},
{
"text": "Waterford",
"value": 0,
"message": "Incorrect :( Not Waterford"
}
]
},
{
"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 :( Another message for an incorrect answer."
},
{
"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 :( Not Colin Farrel."
},
{
"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 :( Not Domhnall Gleeson."
},
{
"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 :) Saoirse was just thirteen when she was nominated for her part in Atonement."
}
]
},
{
"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 :( Another message for an incorrect answer."
},
{
"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 :( Not Galway."
},
{
"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 :( Not Galway."
},
{
"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 :) This one is in Galway."
}
]
}
],
"results": {
"eyebrow": "You scored {0} out of {1}!",
"title": "That’s one well-versed audition! Take a bow!",
"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.