New quiz

frontend/src/assets/stylesheets/components/App.scss

@@ -0,0 +1,23 @@
+.app {
+  text-align: center;
+
+  &__name {
+    font-size: 3.125rem;
+  }
+
+  &__instructions {
+    font-size: 1.25rem;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  &__list {
+    margin-bottom: 2rem;
+    margin-left: 2.5rem;
+    list-style-type: disc;
+
+    > li {
+      margin-bottom: 0.5rem;
+    }
+  }
+}

frontend/src/assets/stylesheets/components/CodeEditor.scss

@@ -3,7 +3,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  top: 0;
+  top: 300px;
   display: flex;
   align-items: center;
 
@@ -153,11 +153,12 @@
 
   .code_editor__background {
     position: absolute;
-    top: 0;
+    top: -150px;
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.3);
+    height:100vh;
+    //background-color: rgba(0, 0, 0, 0.3);
     z-index: 0;
     cursor: pointer;
   }

frontend/src/assets/stylesheets/components/Game.scss

@@ -12,7 +12,6 @@
   }
 
   &__congratulation {
-    margin-bottom: 5rem;
     font-size: 1.5rem;
   }
 }

frontend/src/assets/stylesheets/components/Playthrough.scss

@@ -1,8 +1,8 @@
 .playthrough {
   padding: 2rem 0;
-  max-width: 700px;
   margin: 0 auto;
   text-align: left;
+  padding-top: 0;
 
   &__title {
     font-size: 2.2rem;
@@ -19,7 +19,6 @@
   }
 
   &__list {
-    margin-bottom: 2rem;
     margin-left: 2.5rem;
     list-style-type: disc;
 

frontend/src/assets/stylesheets/components/Results.scss

@@ -1,5 +1,6 @@
 .results {
   padding: 2rem 0;
+  padding-top: 0;
 
   &__title {
     font-size: 2.2rem;
@@ -13,14 +14,50 @@
 }
 
 .result {
-  margin: 0 auto;
+  //margin: 0 auto;
   display: grid;
-  grid-template-columns: 2fr 1fr;
-  margin-bottom: 0.75rem;
-  max-width: 300px;
+  //grid-template-columns: 2fr 1fr;
+  //margin-bottom: 0.75rem;
+  //max-width: 300px;
   font-size: 1.25rem;
+  text-align: center;
 
   &__category {
     font-weight: bold;
   }
+  .column-width{
+    width: 33%;
+  }
+  /* Result Table */
+  #title {
+    text-align: left;
+    font-family: arial, sans-serif;
+  }
+  #quizResults {
+    text-align: left;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    border-collapse: collapse;
+    border: 1px solid #6c757d;
+    width: 100%;
+  }
+  #quizResults td, #quizResults th {
+    border: 1px solid #6c757d;
+    font-size: 16px;
+    padding: 10px;
+  }
+  #quizResults th {
+    text-align: center;
+    color: #fed136;
+    background-color: rgb(72, 72, 72);
+  }
+  .answer-wrong{
+    color: #721c24;
+    background-color: #f8d7da;
+  }
+  .answer-correct{
+    color: #155724;
+    background-color: #d4edda;
+  }
 }

frontend/src/assets/stylesheets/main.scss

@@ -7,6 +7,8 @@
 @import "base/base";
 @import "base/helpers";
 
+@import "components/App";
+
 @import "components/CodeEditor";
 @import "components/Header";
 @import "components/Instructions";
@@ -22,3 +24,4 @@
 
 @import "pages/Supplementary";
 @import "pages/CaseStudy";
+@import "pages/quiz";

frontend/src/assets/stylesheets/pages/CaseStudy.scss

@@ -1,5 +1,4 @@
 .study {
-  width: 960px;
   margin: 2rem auto;
   font-size: 1.5rem;
 

frontend/src/assets/stylesheets/pages/quiz.scss

@@ -0,0 +1,231 @@
+.quiz {
+
+  .quizHeader {
+    text-align: center;
+    margin-top: 110px;
+  }
+
+  .body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background: #eee;
+
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .body {
+    margin: 0;
+    padding: 0;
+    background: #eee;
+    font-family: sans-serif;
+  }
+
+  .container {
+    position: relative;
+    max-width: 800px;
+    margin: 0 auto;
+    background: #fff;
+    border-radius: 3px;
+  }
+
+  @media (min-width: 769px) {
+    .container {
+      margin: 2.5rem auto;
+    }
+  }
+
+  /* Result Component */
+  .result {
+    padding: 1.5rem 2.5rem;
+  }
+
+  /* Quiz Component */
+  .answerOptions {
+    margin: 16px;
+    padding: 0;
+    list-style: none;
+    display: list-item;
+  }
+
+  /* QuestionCount Component */
+  .questionCount {
+    padding: 1.5rem 2.5rem 0;
+    font-size: 14px;
+  }
+
+  /* Question Component */
+  .question {
+    margin: 0;
+    padding: 0.5rem 2.5rem 1.5rem 2.5rem;
+  }
+
+  /* AnswerOption Component */
+  .answerOption {
+    border-top: 1px solid #eee;
+  }
+
+  .answerOption:hover {
+    background-color: #eefbfe;
+  }
+
+  .checkboxCustomButton {
+    position: absolute;
+    width: auto;
+    opacity: 0;
+  }
+
+  .checkboxCustomButton,
+  .checkboxCustomLabel {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .checkboxCustomLabel {
+    position: relative;
+    width: 100%;
+    margin: 0;
+    padding: 1.5rem 2.5rem 1.5rem 5rem;
+    font-size: 16px;
+    line-height: 1.5;
+    text-align: left;
+  }
+
+  .checkboxCustomButton ~ .checkboxCustomLabel:before {
+    position: absolute;
+    top: 20px;
+    left: 38px;
+    width: 28px;
+    height: 28px;
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    background: #fff;
+    border: 1px solid #bbb;
+    transition: all 0.3s;
+  }
+
+  .checkboxCustomButton:checked ~ .checkboxCustomLabel:before {
+    content: '';
+    background: #8bc53f no-repeat;
+    background-size: 27px;
+    border-color: #8bc53f;
+  }
+
+  .checkboxCustomButton:checked ~ .checkboxCustomLabel:after {
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  .radioCustomButton {
+    position: absolute;
+    width: auto;
+    opacity: 0;
+  }
+
+  .radioCustomButton,
+  .radioCustomLabel {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .radioCustomLabel {
+    position: relative;
+    width: 100%;
+    margin: 0;
+    padding: 1.5rem 2.5rem 1.5rem 5rem;
+    font-size: 16px;
+    line-height: 1.5;
+    text-align: left;
+  }
+
+  .radioCustomButton ~ .radioCustomLabel:before {
+    position: absolute;
+    top: 20px;
+    left: 38px;
+    width: 28px;
+    height: 28px;
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 50%;
+    transition: all 0.3s;
+  }
+
+  .radioCustomButton:checked ~ .radioCustomLabel:before {
+    content: '';
+    background: #8bc53f no-repeat;
+    background-size: 27px;
+    border-color: #8bc53f;
+  }
+
+  .radioCustomButton:checked ~ .radioCustomButton:after {
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  .nextButton {
+    margin: 20px;
+    padding: 8px !important;
+  }
+
+  .align-right {
+    text-align: right;
+  }
+
+  .top-margin {
+    margin-top: 150px !important;
+  }
+
+  /* Animation */
+  .fade-enter {
+    opacity: 0;
+  }
+
+  .fade-enter.fade-enter-active {
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out 0.3s;
+  }
+
+  .fade-leave {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    opacity: 1;
+  }
+
+  .fade-leave.fade-leave-active {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  .fade-appear {
+    opacity: 0;
+  }
+
+  .fade-appear.fade-appear-active {
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+
+}