Add an interactive graphic to a multiple choice quiz in Rise 360. This theme component converts a regular multiple choice quiz into a clickable graphic.
/* the background image in a 2/2 grid, perfect 1:1 aspect ratio */
div[data-block-id="your-block-id"] .quiz-card__interactive > div{
background: url(link-to-your-image.png);
padding-bottom: 400px;
background-size: cover;
background-repeat: no-repeat;
width:400px;
height:400px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
}
/* replace your-block-id with your block id */
div[data-block-id="your-block-id"] .quiz-card__feedback--frame .quiz-card__feedback-wrap {padding-top:0; padding-bottom:0; background: transparent;
overflow: visible;}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option.is-complete.is-selected .quiz-multiple-choice-option__border::before,
div[data-block-id="your-block-id"] .quiz-multiple-choice-option.is-complete.is-selected.is-correct .quiz-multiple-choice-option__border::before{border:0px none}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option.is-complete.is-incorrect.is-selected .quiz-multiple-choice-option__border {
background: red;
mix-blend-mode: multiply;
}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option__border {
top: 1px !important;
bottom: 1px !important;
}
div[data-block-id="your-block-id"] .quiz-card__feedback-wrap {
background-color:#eee !important;
padding: 1em !important;
}
div[data-block-id="your-block-id"] .quiz-card__feedback {
margin-top: -70px;
}
div[data-block-id="your-block-id"] .quiz-card__submit.brand--ui {
height: auto;
padding-bottom: 4rem;
}
div[data-block-id="your-block-id"] .block-knowledge .quiz-card__interactive {
margin-bottom: 0;
padding-bottom: 0;
}
div[data-block-id="your-block-id"] .quiz-card__interactive > div > div {
height: 200px; width:50%;
}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option {border:5px solid transparent}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option.is-selected {
border: 5px solid rgba(255,216,5,.9);
}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option-wrap:hover:not(.quiz-multiple-choice-option-wrap--complete) {background-color:transparent}
div[data-block-id="your-block-id"] .quiz-multiple-choice-option__indicator,
div[data-block-id="your-block-id"] .quiz-multiple-choice-option__text brand--body,
div[data-block-id="your-block-id"] .quiz-multiple-choice-option__text {
display: none;
}
@media only screen and (max-width : 640px) {
div[data-block-id="your-block-id"] .quiz-card__interactive > div{
max-width:100%;
background-size:contain;
aspect-ratio: 1 / 1;
}
div[data-block-id="your-block-id"] .quiz-card__interactive > div > div {
aspect-ratio: 1 / 1; height:auto;
}
}