wip

src/view/block/questionBlock/QuestionBlock.jsx

+import './questionBlock.scss';
 import Button from '../../cmp/button/Button.jsx';
 import Arr from '/svg/arr.svg';
 

src/view/block/questionBlock/questionBlock.scss

+.question-block__title {
+	@include headline;
+	margin: 0 0 15px;
+}
+
+.question-block__notify {
+	@include mainBodyText;
+	margin: 0;
+}

src/view/cmp/quizProgress/QuizProgress.jsx

@@ -4,13 +4,13 @@ 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"/>
+            <ForwardArr width="11" height="18"/>
         </button>
         <ul className="quiz-progress__list">
             {(()=>{
                 var out = [];
                 var el;
-                for (var i = 0; i < 30; i++) {
+                for (var i = 0; i < 19; i++) {
                     var arr = ['quiz-progress__item'];
                     if (i < 5) {
                         arr.push('quiz-progress__item--disabled');
@@ -34,8 +34,8 @@ const QuizProgress = D.declare('view.cmp.QuizProgress', () => {
                 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 class="quiz-progress__control quiz-progress__control--forward" type="button" aria-label="Перейти к следующему вопросу">
+            <ForwardArr width="11" height="18"/>
         </button>
     </div>
 })

src/view/cmp/quizProgress/quizProgress.scss

 .quiz-progress {
 	display: flex;
+	max-width: 100%;
 	color: $text-main;
+	background-color: $bg-main;
+	border: 1px solid #D0D0D0;
+	border-radius: 25px;
 }
 
 .quiz-progress__list {
@@ -9,8 +13,61 @@
 }
 
 .quiz-progress__item {
+	flex: none;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	margin: -1px 4px -1px 0;
+	width: 50px;
+	height: 50px;
 	text-align: center;
 	font-weight: 600;
 	font-size: 18px;
 	line-height: 22px;
+	border: 2px solid transparent;
+	border-radius: 25px;
+	cursor: pointer;
+}
+
+.quiz-progress__item--disabled {
+	color: #C9C7C7;
+}
+
+.quiz-progress__item--true {
+	color: $accent-main;
+}
+
+.quiz-progress__item--false {
+	color: $red;
+}
+
+.quiz-progress__item--true.quiz-progress__item--current {
+	color: $text-main;
+	border-color: $accent-main;
+	box-shadow: 2px 1px 5px #BEDDD1;
 }
+
+.quiz-progress__item--false.quiz-progress__item--current {
+	color: $red;
+	border-color: $red;
+	box-shadow: 2px 1px 5px #DDBEBE;
+}
+
+.quiz-progress__control {
+	@include btn-reset;
+	@include hover;
+	flex: none;
+	width: 56px;
+	border-radius: 25px;
+}
+
+.quiz-progress__control--back svg {
+	transform: scale(-1,1);
+}
+
+.quiz-progress__control--disabled {
+	display: none;
+}
+

src/view/page/quiz/quizPage.scss

@@ -3,19 +3,38 @@
 }
 
 .quiz-page__wrapper {
-	width: 100%;
+	margin: 0 auto;
+	width: 1000px;
+	max-width: 100%;
 }
 
 .quiz-page__header {
 	text-align: center;
+	min-height: 120px;
 }
 
 .quiz-page__title {
 	@include title;
-	margin: 0;
+	margin: 0 0 14px;
 }
 
 .quiz-page__subtitle {
 	@include mainBodyText;
-	margin: 0;
+	margin: 0 0 14px;
+}
+
+.quiz-page__progress {
+	margin-bottom: 24px;
+	width: calc(100% + 80px);
+}
+
+.quiz-page__notify {
+	@include bodyText;
+	margin: 0 0 30px;
+	text-align: center;
+}
+
+.quiz-page__notify b {
+	font-weight: 500;
+	color: $sienna;
 }