<div class="quiz quiz--category" data-module="categoryQuiz">
<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">Which house would you never make a peace treaty with?</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-1515255384510-23e8b6a6ca3c?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-1515255384510-23e8b6a6ca3c?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-1515255384510-23e8b6a6ca3c?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-1515255384510-23e8b6a6ca3c?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-1515255384510-23e8b6a6ca3c?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="0" data-message="" data-category="Jon Snow">
<button class="answer__text-button">
<span class="answer__label">House Lannister</span>
</button>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="" data-category="Jon Snow">
<button class="answer__text-button">
<span class="answer__label">House Frey</span>
</button>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="" data-category="Tywin Lannister">
<button class="answer__text-button">
<span class="answer__label">House Stark</span>
</button>
</div>
<div class="cell medium-6 answer js-answer" data-value="0" data-message="" data-category="Tywin Lannister">
<button class="answer__text-button">
<span class="answer__label">House Martell</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">Where would you rather live in Westeros?</h2>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="" data-category="Jon Snow">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1509384658642-3f88b1291b3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Dreadfort</p>
</div>
</div>
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="" data-category="Jon Snow">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1567766897817-a7662158ae71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Winterfell</p>
</div>
</div>
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="" data-category="Tywin Lannister">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1564730786143-ca5fe42ee54d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">Casterly Rock</p>
</div>
</div>
<div class="cell medium-6 large-3 answer js-answer" data-value="0" data-message="" data-category="Tywin Lannister">
<div class="answer__full-button">
<div class="answer__image" style="background-image: url(https://images.unsplash.com/photo-1532086197721-3002dc9e661d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);"></div>
<p class="answer__label">King's Landing</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">Choose your champion's armor</h2>
<div class="grid-x grid-margin-x">
<div class="cell medium-6 answer js-answer" data-value="0" data-message="" data-category="Jon Snow">
<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-1460194436988-671f763436b7?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-1460194436988-671f763436b7?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-1460194436988-671f763436b7?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-1460194436988-671f763436b7?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-1460194436988-671f763436b7?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="" data-category="Jon Snow">
<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-1546193420-1a63c77b945c?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-1546193420-1a63c77b945c?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-1546193420-1a63c77b945c?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-1546193420-1a63c77b945c?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-1546193420-1a63c77b945c?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="" data-category="Tywin Lannister">
<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-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&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-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&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-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&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-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&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-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&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="" data-category="Tywin Lannister">
<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-1577892211256-b03ac5f488b8?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-1577892211256-b03ac5f488b8?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-1577892211256-b03ac5f488b8?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-1577892211256-b03ac5f488b8?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-1577892211256-b03ac5f488b8?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">
<div class="quiz-results__category js-results-category" data-category="Jon Snow" data-index="0">
<h2 class="quiz-results__title">Your Game of Thrones character is Jon Snow!</h2>
<div class="richtext ">
<p>Jon Snow: 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="Tywin Lannister" data-index="1">
<h2 class="quiz-results__title">Your Game of Thrones character is Tywin Lannister!</h2>
<div class="richtext ">
<p>Tywin Lannister: 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--category" data-module="categoryQuiz">
<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 hasCategories="true" results=results.categories}}
</div>
</div>
{
"button": {
"url": "#",
"text": "Show my results"
},
"questions": [
{
"type": "SingleImageFourAnswers",
"eyebrow": "Question {0}",
"question": "Which house would you never make a peace treaty with?",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1515255384510-23e8b6a6ca3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1515255384510-23e8b6a6ca3c?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-1515255384510-23e8b6a6ca3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1515255384510-23e8b6a6ca3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"answers": [
{
"text": "House Lannister",
"value": 0,
"category": "Jon Snow"
},
{
"text": "House Frey",
"value": 0,
"category": "Jon Snow"
},
{
"text": "House Stark",
"value": 0,
"category": "Tywin Lannister"
},
{
"text": "House Martell",
"value": 0,
"category": "Tywin Lannister"
}
]
},
{
"type": "FourSmallImageAnswers",
"eyebrow": "Question {0}",
"question": "Where would you rather live in Westeros?",
"answers": [
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1509384658642-3f88b1291b3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Dreadfort",
"value": 0,
"category": "Jon Snow"
},
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1567766897817-a7662158ae71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Winterfell",
"value": 0,
"category": "Jon Snow"
},
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1564730786143-ca5fe42ee54d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "Casterly Rock",
"value": 0,
"category": "Tywin Lannister"
},
{
"simpleImage": {
"src": "https://images.unsplash.com/photo-1532086197721-3002dc9e661d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
},
"text": "King's Landing",
"value": 0,
"category": "Tywin Lannister"
}
]
},
{
"type": "FourLargeImageAnswers",
"eyebrow": "Question {0}",
"question": "Choose your champion's armor",
"answers": [
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1460194436988-671f763436b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1460194436988-671f763436b7?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-1460194436988-671f763436b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1460194436988-671f763436b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"category": "Jon Snow"
},
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1546193420-1a63c77b945c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1546193420-1a63c77b945c?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-1546193420-1a63c77b945c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1546193420-1a63c77b945c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"category": "Jon Snow"
},
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1553986782-9f6de60b51b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"category": "Tywin Lannister"
},
{
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1577892211256-b03ac5f488b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1577892211256-b03ac5f488b8?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-1577892211256-b03ac5f488b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1577892211256-b03ac5f488b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=80"
}
]
},
"value": 0,
"category": "Tywin Lannister"
}
]
}
],
"results": {
"eyebrow": "",
"title": "",
"richtext": {},
"categories": [
{
"name": "Jon Snow",
"title": "Your Game of Thrones character is Jon Snow!",
"richtext": {
"content": "<p>Jon Snow: 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>"
}
},
{
"name": "Tywin Lannister",
"title": "Your Game of Thrones character is Tywin Lannister!",
"richtext": {
"content": "<p>Tywin Lannister: 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.