first round of codekit

Author: AhoyLemon

config.codekit3

@@ -116,6 +116,7 @@ var app = new Vue({
       },
 
       diagnosis: {
+        sanityScore: -1,
         showHow: false
       }
     },
@@ -400,6 +401,17 @@ var app = new Vue({
       }
 
     },
+
+    determineSanity() {
+      const self = this;
+      const sanityBarrier = 50;      // const yourScore = Math.floor(Math.random() * 100);
+      self.ui.diagnosis.sanityScore = Math.floor(Math.random() * 100);
+      if (self.ui.diagnosis.sanityScore < sanityBarrier) {
+        current.diagnosis = "INSANE";
+      } else {
+        current.diagnosis = "SANE";
+      }
+    },
 
 
     showHow() {
@@ -618,6 +630,8 @@ var app = new Vue({
       return 0;
     });
 
+    self.determineSanity();
+
     // self.ui.sortCities.cities.forEach(function(element, key) {
     //   element.score = 0;
     // });

css/site.css

@@ -2,4 +2,17 @@
 //@prepros-append partials/_variables.js
 //@prepros-append partials/_questions.js
 
-//@prepros-append partials/_vue.js
+//@prepros-append partials/_vue.js
+
+
+// function calculateSanity() {
+//   const sanityBarrier = 50;
+//   const yourScore = Math.floor(Math.random() * 100);
+//   // self.ui.diagnosis.sanityScore = Math.floor(Math.random() * 100);
+  
+//   if (yourScore < sanityBarrier) {
+//     current.diagnosis = "INSANE";
+//   } else {
+//     current.diagnosis = "SANE";
+//   }
+// }

index.html

@@ -22,7 +22,7 @@ html(lang="en")
           p In an effort to make our determination, we will ask you a series of questions. We will not make it easy to answer. Expect things to get uncomfortable.
           p When you are ready, click the button below.
           .button-holder
-            button.begin(type="button" @click="current.interface = 'questions'") BEGIN
+            button.begin(type="button" @click="current.interface = 'questions'") Begin The Exam
 
       main.questions(v-if="current.interface == 'questions'" style="min-height:100vh; display:flex; align-items:end; justify-content:center; padding:4rem;")
         .inner
@@ -70,30 +70,6 @@ html(lang="en")
             template(v-if="current.question == 20")
               include questions/_sort-cities.pug
 
-      main.outro(v-if="current.interface == 'outro'")
-
-        .inner
-          section.diagnosis
-            dl.diagnosis
-              dt Your diagnosis
-              dd
-                .sticker-holder
-                  .sticker {{current.diagnosis}}
-                .button-holder(v-if="!ui.diagnosis.showHow")
-                  button(type="button" @click="showHow()") How was this determined?
-
-          section.how(v-if="ui.diagnosis.showHow")
-            dl
-              dt Q: How was this determined?
-              dd A: Randomly.
-            pre
-              code(class="language-js").
-                const sanityBarrier = 50;
-                const yourScore = Math.floor(Math.random() * 100);
-                if (yourScore < sanityBarrier) {
-                  current.diagnosis = "INSANE";
-                } else {
-                  current.diagnosis = "SANE";
-                }
+      include screens/_outro.pug
 
     include partials/_javascripts 

js/partials/_vue.js

@@ -0,0 +1,41 @@
+.outro(v-if="current.interface == 'outro'")
+
+  header.diagnosis-header
+    .sticker {{current.diagnosis}}
+    .diagnosis-text
+      .text #[strong {{answers.yourName}}], our scientific algorith has determined that you are #[code {{ui.diagnosis.sanityScore +'%' }}] sane.
+    .button-holder
+      a.button Buy A Sticker
+  main
+    .inner
+      //- section.diagnosis
+      //-   dl.diagnosis
+      //-     dt Your diagnosis:
+      //-     dd
+      //-       .sticker-holder
+      //-         .sticker 
+      //-       .button-holder(v-if="!ui.diagnosis.showHow")
+      //-         button(type="button" @click="showHow()") How was this determined?
+
+      section.how(v-if="ui.diagnosis.showHow")
+        dl
+          dt Q: How was this determined?
+          dd 
+            p A: #[strong Randomly].
+            p
+              | After completing the exam, you were randomly assigned a #[code sanityScore] of #[code {{ui.diagnosis.sanityScore +'%' }}]. This assigned you the ranking of #[strong {{current.diagnosis}}].
+            p 
+              | None of your exam questions were considered when assigning your #[code sanityScore].
+            //- p Matter of fact, your sanity was scored like this...
+            pre
+              code(class="language-js").
+                function calculateSanity() {
+                  const sanityBarrier = 50;
+                  const sanityScore = Math.floor(Math.random() * 100);
+                  if (sanityScore < sanityBarrier) {
+                    current.diagnosis = "INSANE";
+                  } else {
+                    current.diagnosis = "SANE";
+                  }
+                }
+            p If you'd like, you can recalculate your score.

js/site.js

@@ -1,8 +1,12 @@
-main.outro { min-height: 100vh; background:white; color:black; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:4rem;
+.outro { min-height: 100vh; background:white; color:black; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:4rem;
 
-  dl {
-    dt { text-transform: uppercase; font-weight: $semibold; letter-spacing: 0.1em; }
+  header.outro { @include position(fixed,0,0,null,0); }
+  dl { font-size:1.25rem;
+    dt { text-transform: uppercase; font-weight: $semibold; letter-spacing: 0.1em; font-size:110%; }
     .sticker-holder { text-align: center; }
+    p { margin-bottom: 1.5em;
+      code { background:rgba(0,0,0,0.1); color:#c31111; padding-left: 0.25em; padding-right: 0.25em; }
+    }
   }
 
   .button-holder { text-align: center; padding-top:$gap;
@@ -15,5 +19,5 @@ main.outro { min-height: 100vh; background:white; color:black; min-height:100vh;
 
 
   .sticker { background: red; font-size:10vw; color:white; text-shadow: 1px 1px 1px black, -1px -1px 1px black; display: inline-block; padding:0 0.25em; line-height: 100%; font-weight: 900; }
-  code { font-size: 2.25em;}
+  // code { font-size: 2.25em;}
 }