quiz

.envexample

@@ -0,0 +1,2 @@
+REACT_APP_API_URL = https://dev.itguild.info
+REACT_APP_BASE_URL = https://dev.itguild.info

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="JSX" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/outstaffing-react.iml" filepath="$PROJECT_DIR$/.idea/outstaffing-react.iml" />
+    </modules>
+  </component>
+</project>

.idea/outstaffing-react.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package-lock.json

@@ -28,6 +28,7 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
         "react-select": "^4.3.1",
+        "react-syntax-highlighter": "^15.4.5",
         "react-yandex-metrika": "^2.6.0",
         "redux-devtools-extension": "^2.13.9",
         "sass": "^1.34.0",
@@ -3161,6 +3162,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hast": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
+      "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -3336,6 +3345,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
+    },
     "node_modules/@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -5389,6 +5403,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -5602,6 +5643,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -8557,6 +8607,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -8935,6 +8997,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -9416,6 +9486,31 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9429,6 +9524,14 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@@ -10112,6 +10215,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
@@ -10248,6 +10373,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -10334,6 +10468,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -13054,6 +13197,19 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -14280,6 +14436,23 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -15909,6 +16082,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/prismjs": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -15987,6 +16168,18 @@
         "react": ">=0.14.0"
       }
     },
+    "node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -16809,6 +17002,21 @@
         "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz",
+      "integrity": "sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.25.0",
+        "refractor": "^3.2.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -17011,6 +17219,25 @@
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
       "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
     },
+    "node_modules/refractor": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",
+      "integrity": "sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.25.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+      "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -18383,6 +18610,15 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -24203,6 +24439,14 @@
         "@types/node": "*"
       }
     },
+    "@types/hast": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz",
+      "integrity": "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==",
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/hoist-non-react-statics": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
@@ -24377,6 +24621,11 @@
         }
       }
     },
+    "@types/unist": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
+      "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ=="
+    },
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
@@ -25996,6 +26245,21 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -26174,6 +26438,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
+    },
     "commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -28493,6 +28762,14 @@
         "reusify": "^1.0.4"
       }
     },
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
     "faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -28792,6 +29069,11 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs="
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -29160,6 +29442,23 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
+    },
+    "hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -29170,6 +29469,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+    },
     "history": {
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
@@ -29728,6 +30032,20 @@
         }
       }
     },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
@@ -29824,6 +30142,11 @@
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.4.tgz",
       "integrity": "sha512-/b4ZVsG7Z5XVtIxs/h9W8nvfLgSAyKYdtGWQLbqy6jA1icmgjf8WCoTKgeS4wy5tYaPePouzFMANbnj94c2Z+A=="
     },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
+    },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -29879,6 +30202,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
+    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -31897,6 +32225,15 @@
         }
       }
     },
+    "lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -32881,6 +33218,19 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -34193,6 +34543,11 @@
         }
       }
     },
+    "prismjs": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ=="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -34259,6 +34614,14 @@
         "warning": "^4.0.0"
       }
     },
+    "property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "requires": {
+        "xtend": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -34882,6 +35245,18 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-syntax-highlighter": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz",
+      "integrity": "sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.25.0",
+        "refractor": "^3.2.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -35037,6 +35412,23 @@
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
       "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
     },
+    "refractor": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.5.0.tgz",
+      "integrity": "sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==",
+      "requires": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.25.0"
+      },
+      "dependencies": {
+        "prismjs": {
+          "version": "1.25.0",
+          "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz",
+          "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg=="
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -36146,6 +36538,11 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-select": "^4.3.1",
+    "react-syntax-highlighter": "^15.4.5",
     "react-yandex-metrika": "^2.6.0",
     "redux-devtools-extension": "^2.13.9",
     "sass": "^1.34.0",

src/App.js

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy } from 'react'
+import React, { Suspense, lazy, useEffect, useState } from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { selectAuth } from './redux/outstaffingSlice'
@@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import './fonts/stylesheet.css'
 import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute'
 
+
 import { YMInitializer } from 'react-yandex-metrika'
 
 import AuthPageForDevelopers from './pages/AuthPageForDevelopers'
@@ -16,6 +17,13 @@ import CalendarPage from './pages/CalendarPage'
 import ReportPage from './pages/ReportFormPage.js'
 import FormPage from './pages/FormPage.js'
 import SingleReportPage from './pages/SingleReportPage'
+import { Highlighter } from './pages/CodeSnippetPage'
+import { QuizPage } from './pages/quiz/QuizPage'
+import { InterjacentPage } from './pages/quiz/InterjacentPage'
+import { QuizTestPage } from './pages/quiz/QuizTestPage'
+import { Instruction } from './components/features/quiz/Instructions'
+import { InstructionPage } from './pages/quiz/InstructionPage'
+import {ResultPage} from "./pages/quiz/ResultPage";
 
 const App = (props) => {
   const isAuth = useSelector(selectAuth)
@@ -44,6 +52,11 @@ const App = (props) => {
           />
           <ProtectedRoute exact path='/report' component={ReportPage} />
           <ProtectedRoute path='/report/:id' component={SingleReportPage} />
+          <ProtectedRoute path='/quiz' component={QuizPage} />
+          <ProtectedRoute path='/quiz-interjacent' component={InterjacentPage} />
+          <ProtectedRoute path='/quiz-test' component={QuizTestPage} />
+          <ProtectedRoute path='/quiz-instruction' component={InstructionPage} />
+          <ProtectedRoute path='/quiz-result' component={ResultPage} />
           <ProtectedRoute component={() => <div>Page not found</div>} />
         </Switch>
       </Router>
@@ -63,3 +76,5 @@ const App = (props) => {
 }
 
 export default App
+
+

src/components/AuthBox/AuthBox.js

@@ -91,7 +91,7 @@ export const AuthBox = ({ title, roleChangeLink }) => {
             {isLoading ? <Loader /> : 'Войти'}
           </button>
 
-          <button className='auth-box__form-btn--role auth-box__auth-link'>
+          <button className='auth-box__form-btn--role auth-box__auth-link' >
             <Link to={roleChangeLink}>Для разработчиков</Link>
           </button>
         </div>

src/components/Candidate/Candidate.js

@@ -18,12 +18,15 @@ import { Footer } from '../Footer/Footer'
 
 import './candidate.scss'
 import { getRole } from '../../redux/roleSlice'
+import { CodeSnippetlighter } from '../../pages/CodeSnippetPage'
+import { useState } from 'react'
 
 const Candidate = () => {
   const history = useHistory()
   const { id: candidateId } = useParams()
   const dispatch = useDispatch()
   const role = useSelector(getRole)
+  const [activeSnippet, setActiveSnippet] = useState(true)
 
   useEffect(() => {
     window.scrollTo(0, 0)
@@ -117,8 +120,11 @@ const Candidate = () => {
       <div className='candidate__main'>
         <div className='row'>
           <div className='col-12 col-xl-4'>
-            <Sidebar candidate={currentCandidateObj} position />
+            <Sidebar candidate={currentCandidateObj} position activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet}/>
           </div>
+          {
+            activeSnippet ?
+            (
           <div className='col-12 col-xl-8'>
             <div className='candidate__main-description'>
               <img src={rectangle} alt='' />
@@ -141,8 +147,44 @@ const Candidate = () => {
                   </button>
                 </Link> */}
               <SkillSection skillsArr={skillValues} />
+              
             </div>
           </div> 
+            ) :
+            (
+          // <div className="col-12 col-xl-8">
+          //   <CodeSnippetlighter />
+          // </div>
+          <div className="col-12 col-xl-8">
+            <div className="candidate__works works">
+              <div className="works__body">
+                <div className="works__item item-works">
+                  <div className="item-works__body">
+                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
+                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
+                    <div className="item-works__mark">Angular</div>
+                  </div>                    
+                </div>
+                <div className="works__item item-works">
+                  <div className="item-works__body">
+                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
+                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
+                    <div className="item-works__mark">Angular</div>
+                  </div>                    
+                </div>
+                <div className="works__item item-works">
+                  <div className="item-works__body">
+                    <Link to="/" className="item-works__link">Vuetifyis.com</Link>
+                    <div className="item-works__text">Forked from peluprvi/vuetifyjs.com <br /> Vuetifyjs.com documentation</div>
+                    <div className="item-works__mark item-works__mark_yellow">Laravel</div>
+                  </div>                    
+                </div>
+              </div>
+            </div>
+          </div>
+            )
+          }          
+      
         </div>
       </div>
       <Footer />

src/components/Candidate/candidate.scss

@@ -1,3 +1,4 @@
+@use 'sass:math'; 
 .candidate {
   &__title {
     margin-top: 60px;
@@ -291,3 +292,85 @@
 .candidate + .logout-button {
   top: 80px !important;
 }
+
+
+.candidate__works{ 
+  @media (min-width: 576px) {
+    padding: 0 0 45px 0;
+  }
+}
+.works__body{
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -15px -30px;
+}
+.item-works{
+  display: flex;
+  flex-direction: column;
+  padding: 0 15px;
+  margin: 0 0 30px 0;
+  flex: 0 1 50%;
+  position: relative;
+
+  @media (max-width: 761px) {
+    flex: 0 1 100%;
+  }
+
+  &__body{
+    padding: 17px;
+    border: 2px solid #54b611;
+    border-radius: 10px;
+
+    &::before{
+      content: "";
+      position: absolute;
+      top: -2px;
+      left: 25px;
+      height: 5px;
+      width: 29px;
+      border-radius: 3px;
+      background-color: #54b611;
+    }
+  }
+
+  &__link{
+    color: #0350dc;
+    font-family: "GT Eesti Pro Display";
+    font-size: 16px;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: math.div(36,16);
+    text-decoration: underline;
+    display: block;
+    margin-bottom: 17px;
+  }
+  &__text{
+    margin-bottom: 37px;
+    color: #000000;
+    font-family: "GT Eesti Pro Display - Thin";
+    font-size: 12px;
+    font-weight: 400;
+    line-height: math.div(18,12);
+  }
+  &__mark{
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    column-gap: 7px;
+    line-height: math.div(36,13);
+
+    &::before{
+      border-radius: 50%;
+      content: "";
+      width: 13px;
+      height: 13px;
+      background-color: #73c141;
+    }
+    &_yellow{
+      &::before{    
+      background-color: #e09f14;
+    }      
+  } 
+    
+  }
+}

src/components/CandidateSidebar/CandidateSidebar.js

@@ -6,6 +6,9 @@ import { LEVELS, SKILLS } from '../constants/constants'
 
 import maleBig from '../../images/medium_male_big.png'
 import './candidateSidebar.scss'
+import { Highlighter } from '../../App'
+import { useState } from 'react'
+import { useEffect } from 'react'
 
 const getYearsString = (years) => {
   let yearsString
@@ -21,7 +24,12 @@ const getYearsString = (years) => {
   return `${years} ${yearsString}`
 }
 
-const CandidateSidebar = ({ candidate, position }) => {
+const CandidateSidebar = ({ candidate, position, setActiveSnippet, activeSnippet }) => {
+  
+  const showSnippet = () => {
+    setActiveSnippet((prev)=>!prev)
+  }
+
   return (
     <div className='candidate-sidebar'>
       <div className='candidate-sidebar__info'>
@@ -50,13 +58,22 @@ const CandidateSidebar = ({ candidate, position }) => {
             Отчёты
           </button>
         </Link>
+        {/* <Link to={`/candidate/${candidate.id}/code`}> */}
+          <button 
+          className='candidate-sidebar__select'
+          onClick={showSnippet}
+          >
+            {activeSnippet ? "Показать": "Скрыть"}
+          </button>
+        {/* </Link> */}
         <div className='candidate-sidebar__achievements'>
           {candidate &&
             candidate.achievements &&
             candidate.achievements.map((item) => {
-              return <Achievement achievement={item.achievement} />
+              return <Achievement key={item.id} achievement={item.achievement} />
             })}
         </div>
+        
       </div>
     </div>
   )

src/components/features/quiz/HeaderQuiz.js

@@ -25,8 +25,6 @@ export const HeaderQuiz = ({header}) => {
       })
    }, [dispatch])
 
-   console.log('render header quiz')
-
    return (
      <div className="header-quiz">
         <div className="header-quiz__container">

src/components/features/quiz/Instructions.js

@@ -9,7 +9,7 @@ import {fetchGet} from "../../../server/server";
 
 export const Instruction = () => {
 
-   const [countQuestions, setCountQuestions] = useState()
+   const [countQuestions, setCountQuestions] = useState(null)
    const test = useSelector(selectedTest)
 
    useEffect(async () => {
@@ -26,21 +26,26 @@ export const Instruction = () => {
    return (
      <div className="instruction">
         <div className="instruction__container">
-           <h3 className="instruction__title quiz-title_h3">Инструкция к тесту</h3>
+           {!countQuestions ? <h2>Loading...</h2> :
-           <div className="instruction__text">
+             <>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempoLorem ipsum dolor sit
+                <h3 className="instruction__title quiz-title_h3">Инструкция к тесту</h3>
-              amet,Lo
+                <div className="instruction__text">
-              rem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo consectetur adipisicing e
+                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempoLorem ipsum dolor sit
-              lit, sed do eiusmod tempo
+                   amet,Lo
-           </div>
+                   rem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo consectetur adipisicing
-           <Link to="/quiz-test" className='instruction__btn quiz-btn quiz-btn_restriction'>Далее</Link>
+                   e
-           <div className="instruction__info">
+                   lit, sed do eiusmod tempo
-              <div className="instruction__icon">
+                </div>
-                 <img src={comment} alt=""/>
+                <Link to="/quiz-test" className='instruction__btn quiz-btn quiz-btn_restriction'>Далее</Link>
-              </div>
+                <div className="instruction__info">
-              <div className="instruction__text instruction__text_info">Количество вопросов в
+                   <div className="instruction__icon">
-                 тесте: <span>{countQuestions}</span></div>
+                      <img src={comment} alt=""/>
-           </div>
+                   </div>
+                   <div className="instruction__text instruction__text_info">Количество вопросов в
+                      тесте: <span>{countQuestions}</span></div>
+                </div>
+             </>
+           }
         </div>
      </div>
    )

src/components/features/quiz/Results.js

@@ -0,0 +1,37 @@
+import React, {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+import {fetchResultTest, selectedTest, selectResult} from "../../../redux/quizSlice";
+import {fetchGet} from "../../../server/server";
+
+
+export const Results = () => {
+   const result = useSelector(selectResult)
+   const test = useSelector(selectedTest)
+   const [maxScore, setMaxScore] = useState('')
+   const dispatch = useDispatch()
+
+   useEffect(async () => {
+      dispatch(fetchResultTest(test.uuid))
+      const response = await fetchGet({
+           link: `${process.env.REACT_APP_API_URL}/api/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`,
+           Origin: `${process.env.REACT_APP_BASE_URL}`,
+        }
+      )
+      setMaxScore(response.sum_point)
+   }, [])
+
+   return (
+     <div className={'result _container'}>
+        {
+           !result ? <h1 style={{display: "block"}}>Ожидайте результата...</h1> :
+
+             <div className="result__body">
+                <div className="result__text">Благодарим за прохождение теста</div>
+                <div className="result__text">Ваш Результат: <span
+                  className="result__score">{result.score}</span> из {maxScore} </div>
+             </div>
+        }
+     </div>
+   );
+};
+

src/components/features/quiz/Task.js

@@ -29,8 +29,6 @@ export const TaskQuiz = () => {
    const id = localStorage.getItem('id');
    const [questions, setQuestions] = useState([])
 
-   console.log("render task");
-
    useEffect(async () => {
       const response = await fetchGet({
            link: `${process.env.REACT_APP_API_URL}/api/question/get-questions?uuid=${dataTest.uuid}`,
@@ -50,12 +48,12 @@ export const TaskQuiz = () => {
       if (checkedValues.length || inputValue) {
          switch (questions[index].question_type_id) {
             case '3':
-               // await dispatch(fetchUserAnswersMany(checkedValues))
+               await dispatch(fetchUserAnswersMany(checkedValues))
                break;
             case '2':
             case '1':
             case '4':
-               //   await dispatch(fetchUserAnswerOne(checkedValues))
+               await dispatch(fetchUserAnswerOne(checkedValues))
                break;
             default:
                break;
@@ -70,7 +68,7 @@ export const TaskQuiz = () => {
             setInputValue('')
          } else {
             history.push(`/quiz-result`)
-            // alert("Тест пройден!")
+            alert("Тест пройден!")
          }
 
       } else {
@@ -133,7 +131,6 @@ export const TaskQuiz = () => {
                                answer={answer}
                              />
                            ))
-
                       }
                       <div className="form-task__buttons">
                          {questions.length !== index + 1 &&

src/pages/CodeSnippetPage.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export const CodeSnippetlighter = () => {
+    const [codeString, setCodeString] = useState(``) 
+
+    useEffect(()=>{
+      fetch('/code.txt')
+      .then((r) => r.text())
+      .then(text  => {
+        setCodeString(text)
+      })  
+    }, [])
+  
+    return (
+        <SyntaxHighlighter language={"javascript"} style={a11yDark} wrapLongLines={false} customStyle={{fontSize:14}} showLineNumbers={true}>
+          {codeString}
+        </SyntaxHighlighter>
+    );
+  };

src/pages/code.txt

@@ -0,0 +1 @@
+Hellow

src/pages/quiz/ResultPage.js

@@ -0,0 +1,23 @@
+import {Link, Redirect} from "react-router-dom"
+import {HeaderPageTestsQuiz} from "../../components/features/quiz/HeaderPageTests"
+import {Results} from "../../components/features/quiz/Results";
+import {useSelector} from "react-redux";
+import {selectedTest} from "../../redux/quizSlice";
+import React from "react";
+
+
+export const ResultPage = () => {
+
+   const test = useSelector(selectedTest)
+
+   if (!test) {
+      return <Redirect to={'/quiz'}/>
+   }
+
+   return (
+     <>
+        <HeaderPageTestsQuiz isVisibilityButton={false}/>
+        <Results/>
+     </>
+   )
+}

src/server/authRedirect.js

@@ -8,7 +8,7 @@ export const withAuthRedirect =
       .then((res) => {
         if (res.status && res.status == 401) {
           localStorage.clear()
-          logout()
+          logout && logout()
           history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth')
         }
 
@@ -16,7 +16,7 @@ export const withAuthRedirect =
       })
       .catch((err) => {
         localStorage.clear()
-        logout()
+        logout && logout()
         history.push(role === 'ROLE_DEV' ? '/authdev' : '/auth')
       })
   }

src/server/server.js

@@ -49,6 +49,7 @@ export const fetchAuth = async ({
 
     response.json().then((resJSON) => {
       localStorage.setItem('auth_token', resJSON.access_token)
+      localStorage.setItem('id', resJSON.id)
       localStorage.setItem(
         'access_token_expired_at',
         resJSON.access_token_expired_at
@@ -104,7 +105,8 @@ export const fetchPost = withAuthRedirect(async (link, body) => {
       headers: {
         Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
         'Content-Type': 'application/json',
-        Origin: `http://localhost`
+        //Origin: `http://localhost:3000`
+        Origin: `${process.env.REACT_APP_BASE_URL}`,
       },
       body: JSON.stringify(body)
     })

src/store/store.js

@@ -3,6 +3,8 @@ import outstaffingReducer from '../redux/outstaffingSlice';
 import loaderReducer from '../redux/loaderSlice';
 import roleReducer from '../redux/roleSlice';
 import reportReducer from '../redux/reportSlice';
+import quizSlice from '../redux/quizSlice';
+
 
 export const store = configureStore({
   reducer: {
@@ -10,5 +12,10 @@ export const store = configureStore({
     loader: loaderReducer,
     role: roleReducer,
     report: reportReducer,
+    quiz: quizSlice,
   },
+  middleware: getDefaultMiddleware =>
+      getDefaultMiddleware({
+        serializableCheck: false,
+      }),
 });