Skip to content

K
kus-admin
Commit ace3c95c by talequale
Options

quiz page markup

parent 3b507e0c
Showing with 172 additions and 1 deletion
bin/index.js
...@@ -17,7 +17,7 @@ const options = yargs ...@@ -17,7 +17,7 @@ const options = yargs
.option("d", { alias: "dir", describe: "database dir", type: "string"}) .option("d", { alias: "dir", describe: "database dir", type: "string"})
.option("f", { alias: "fake", describe: "add fake images", type: "boolean"}) .option("f", { alias: "fake", describe: "add fake images", type: "boolean"})
.option("c", { alias: "category", describe: "1 - product, 2 - standard", type: "string"}) .option("c", { alias: "category", describe: "1 - product, 2 - standard", type: "string"})
.option("i", { alias: "id", describe: "return question with id. use it with `seed` arg", type: "number"}) .option("i", { alias: "id", describe: "return questionBlock with id. use it with `seed` arg", type: "number"})
.argv; .argv;
let categoryFixed = false; let categoryFixed = false;
......
src/svg/forward.svg 0 → 100644
<svg width="11" height="18" viewBox="0 0 11 18" xmlns="http://www.w3.org/2000/svg">
<path d="M1.65127 0.241154C1.23217 -0.118533 0.600841 -0.0703692 0.241154 0.34873C-0.118533 0.767829 -0.0703692 1.39916 0.34873 1.75885L1.65127 0.241154ZM10 8.72414L10.6769 9.46024C10.8872 9.26684 11.0047 8.9927 10.9999 8.70701C10.995 8.42133 10.8681 8.15138 10.6513 7.96529L10 8.72414ZM0.323127 16.2639C-0.0834098 16.6377 -0.109926 17.2703 0.2639 17.6769C0.637727 18.0834 1.27034 18.1099 1.67687 17.7361L0.323127 16.2639ZM0.34873 1.75885L9.34873 9.48298L10.6513 7.96529L1.65127 0.241154L0.34873 1.75885ZM9.32313 7.98804L0.323127 16.2639L1.67687 17.7361L10.6769 9.46024L9.32313 7.98804Z" fill="currentColor"/>
</svg>
src/view/block/questionBlock/QuestionBlock.jsx 0 → 100644
import Button from '../../cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
const QuestionBlock = D.declare('view.block.QuestionBlock', () => {
return <div class="question-block">
<h2 className="question-block__title">Какой из&nbsp;этих ингредиентов не&nbsp;входит в&nbsp;печенье &laquo;Орешки&raquo;?</h2>
<p className="question-block__notify">Возможен единственный выбор.</p>
<div className="question-block__body">
<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>
</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>
</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>
</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>
</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>
</li>
</ul>
<div className="question-block__button">
<Button class={"button button--primary"}><span>Ответить</span><Arr width="17" height="11"/></Button>
</div>
</div>
<div className="question-block__image">
<div className="question-block__image-wrapper">
<img src="/uploads/images/product4.jpg" alt=""/>
</div>
</div>
</div>
</div>
})
export default QuestionBlock;
export {QuestionBlock};
src/view/cmp/quizProgress/QuizProgress.jsx 0 → 100644
import './quizProgress.scss';
import ForwardArr from '/svg/forward.svg';
const QuizProgress = D.declare('view.cmp.QuizProgress', () => {
return <div class="quiz-progress">
<button class="quiz-progress__control quiz-progress__control--back quiz-progress__control--disabled" type="button" aria-label="Перейти к предыдущему вопросу">
<ForwardArr width="9" height="16"/>
</button>
<ul className="quiz-progress__list">
{(()=>{
var out = [];
var el;
for (var i = 0; i < 30; i++) {
var arr = ['quiz-progress__item'];
if (i < 5) {
arr.push('quiz-progress__item--disabled');
}
if (i === 5) {
arr.push('quiz-progress__item--true quiz-progress__item--current');
}
if (i === 7) {
arr.push('quiz-progress__item--false quiz-progress__item--current');
}
if (i > 7 && i < 11) {
arr.push('quiz-progress__item--true');
}
if (i > 11 && i < 19) {
arr.push('quiz-progress__item--false');
}
el = <li class={arr.join(' ')}>{i+1}</li>;
out.push(el);
}
return out;
})()}
</ul>
<button class="quiz-progress__control quiz-progress__control--forward quiz-progress__control--disabled" type="button" aria-label="Перейти к следующему вопросу">
<ForwardArr width="9" height="16"/>
</button>
</div>
})
export default QuizProgress;
export {QuizProgress};
src/view/cmp/quizProgress/quizProgress.scss 0 → 100644
.quiz-progress {
display: flex;
color: $text-main;
}
.quiz-progress__list {
@include list-reset;
display: flex;
}
.quiz-progress__item {
text-align: center;
font-weight: 600;
font-size: 18px;
line-height: 22px;
}
src/view/page/index.jsx
...@@ -10,3 +10,5 @@ export {Fields} from "./tmp/Fields"; ...@@ -10,3 +10,5 @@ export {Fields} from "./tmp/Fields";
export {TestRequests} from "./tmp/TestRequests"; export {TestRequests} from "./tmp/TestRequests";
export {InfoPage} from "./product/InfoPage"; export {InfoPage} from "./product/InfoPage";
export {QuizPage} from "./quiz/QuizPage";
src/view/page/quiz/QuizPage.jsx 0 → 100644
import QuizProgress from '../../cmp/quizProgress/QuizProgress.jsx';
import QuestionBlock from '../../block/questionBlock/QuestionBlock.jsx';
import './quizPage.scss';
const QuizPage = D.declare('view.page.QuizPage', () => {
return <div class="quiz-page">
<div className="quiz-page__wrapper">
<div className="quiz-page__header">
<h1 className="quiz-page__title">Итоговое тестирование</h1>
<p className="quiz-page__subtitle">Вопрос 1-30</p>
</div>
<div className="quiz-page__progress">
<QuizProgress/>
</div>
<p className="quiz-page__notify">Осталось времени на вопрос: <b>00:01:22</b></p>
<div className="quiz-page__body">
<QuestionBlock/>
</div>
</div>
</div>
})
export default QuizPage;
export {QuizPage};
src/view/page/quiz/quizPage.scss 0 → 100644
.quiz-page {
@include infoPage;
}
.quiz-page__wrapper {
width: 100%;
}
.quiz-page__header {
text-align: center;
}
.quiz-page__title {
@include title;
margin: 0;
}
.quiz-page__subtitle {
@include mainBodyText;
margin: 0;
}
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