Skip to content

K
kus-admin
Commit 6350c626 by talequale
Options

quiz questions desktop style

parent dd35f9ba
Showing with 242 additions and 21 deletions
public/uploads/images/correct.svg 0 → 100644
<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4.5L4.21429 8L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
public/uploads/images/incorrect.svg 0 → 100644
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.61108 1.2295L1.22724 7.61169C0.906455 7.9324 0.906455 8.45237 1.22724 8.77307C1.54803 9.09378 2.06813 9.09378 2.38892 8.77307L8.77276 2.39088C9.09354 2.07017 9.09355 1.5502 8.77276 1.2295C8.45197 0.908792 7.93187 0.908792 7.61108 1.2295Z" fill="white" stroke="white" stroke-width="0.5"/>
<path d="M8.77276 7.60913L2.38892 1.22693C2.06813 0.906223 1.54803 0.906223 1.22724 1.22693C0.906455 1.54763 0.906454 2.0676 1.22724 2.38831L7.61108 8.7705C7.93187 9.09121 8.45197 9.09121 8.77276 8.7705C9.09355 8.4498 9.09355 7.92983 8.77276 7.60913Z" fill="white" stroke="white" stroke-width="0.5"/>
</svg>
src/view/block/questionBlock/QuestionBlock.jsx
import './questionBlock.scss';
import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import LinkIcon from '/svg/link.svg';
const QuestionBlock = D.declare('view.block.QuestionBlock', () => {
return <div class="question-block">
......@@ -10,38 +11,62 @@ const QuestionBlock = D.declare('view.block.QuestionBlock', () => {
<div className="question-block__text">
<ul className="question-block__options">
<li className="question-block__option">
<label className="radio-button">
<input type="radio" name="group" className="radio-button__field"/>
<span className="radio-button__indicator"></span>
<span className="radio-button__desc">Вареная сгущенка</span>
<label className="picker-button">
<input type="radio" name="group" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Вареная сгущенка</span>
</label>
</li>
<li className="question-block__option">
<label className="radio-button">
<input type="radio" name="group" className="radio-button__field"/>
<span className="radio-button__indicator"></span>
<span className="radio-button__desc">Мука</span>
<label className="picker-button">
<input type="radio" name="group" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Мука</span>
</label>
</li>
<li className="question-block__option">
<label className="checkbox">
<input type="checkbox" className="checkbox__field"/>
<span className="checkbox__indicator"></span>
<span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
<label className="picker-button picker-button--correct">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Вареная сгущенка <b>Это верный ответ</b><a class="picker-button__link" href="#" aria-label="Просмотр карточки"><LinkIcon width="32" height="32"/></a></span>
</label>
</li>
<li className="question-block__option">
<label className="checkbox">
<input type="checkbox" className="checkbox__field"/>
<span className="checkbox__indicator"></span>
<span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
<label className="picker-button picker-button--incorrect">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Вареная сгущенка <b>Этот ответ был выбран неверно</b></span>
</label>
</li>
<li className="question-block__option">
<label className="checkbox">
<input type="checkbox" className="checkbox__field"/>
<span className="checkbox__indicator"></span>
<span className="checkbox__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
<label className="picker-button picker-button--multiple">
<input type="checkbox" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple">
<input type="checkbox" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple">
<input type="checkbox" className="picker-button__field"/>
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple picker-button--correct">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
<li className="question-block__option">
<label className="picker-button picker-button--multiple picker-button--incorrect">
<span className="picker-button__indicator"></span>
<span className="picker-button__desc">Lorem Ipsum has been the industry's standard 234 dummy text ever since the 1500s</span>
</label>
</li>
</ul>
......
src/view/block/questionBlock/questionBlock.scss
......@@ -5,5 +5,194 @@
.question-block__notify {
@include mainBodyText;
margin: 0;
margin: 0 0 25px;
}
.question-block__body {
display: flex;
align-items: flex-start;
}
.question-block__text {
margin-right: 50px;
min-width: calc(50% - 25px);
}
.question-block__image {
flex: none;
margin-top: -10px;
margin-left: auto;
width: calc(50% - 25px);
}
.question-block__image-wrapper {
position: relative;
padding-top: 59%;
background-image: linear-gradient(180deg, #FFFFFF 0%, #D1D1D1 125.35%);;
border: 5px solid $bg-main;
border-radius: 10px;
overflow: hidden;
}
.question-block__image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.question-block__options {
@include list-reset;
margin-bottom: 42px;
}
.question-block__option {
margin-bottom: 10px;
}
.question-block__option:last-child {
margin-bottom: 0;
}
.picker-button {
position: relative;
display: block;
box-sizing: border-box;
padding: 5px 0 0 50px;
min-height: 39px;
cursor: pointer;
&__desc {
@include bodyText;
display: block;
}
&__indicator {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 30px;
height: 30px;
background-color: $bg-main;
background-repeat: no-repeat;
background-position: center;
background-size: 9px auto;
border: 2px solid #C9C7C7;
border-radius: 50%;
transition: border-color 0.3s ease;
&::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background-color: $accent-main;
background-repeat: no-repeat;
background-position: center;
background-size: 9px auto;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
}
&__field {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
&:checked + .picker-button__indicator {
border-color: $accent-main;
&::after {
opacity: 1;
}
}
}
&__link {
@include hover;
transform: translateY(-5px);
display: inline-block;
vertical-align: top;
margin-left: 15px;
color: $accent-dark;
}
&--multiple {
.picker-button__indicator {
border-radius: 6px;
&::after {
border-radius: 3px;
}
}
}
&--disabled {
cursor: default;
pointer-events: none;
.picker-button__desc {
color: rgba(201, 199, 199, 0.5);
}
}
&--correct {
cursor: default;
.picker-button__desc {
color: $accent-main;
}
.picker-button__indicator {
background-color: $accent-main;
background-image: url("/uploads/images/correct.svg");
border-color: $accent-main;
cursor: default;
&::after {
opacity: 0;
}
}
}
&--incorrect {
cursor: default;
.picker-button__desc {
color: $red;
pointer-events: none;
}
.picker-button__indicator {
background-color: $red;
background-image: url("/uploads/images/incorrect.svg");
border-color: $red;
cursor: default;
&::after {
opacity: 0;
}
}
}
.picker-button__desc b {
font-weight: 500;
color: $text-main;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment