roughed in quiz GET views

app/controllers/candidate_controller.rb

@@ -0,0 +1,19 @@
+class CandidateController < ApplicationController
+  def welcome
+  end
+
+  def question
+    @question = Question.where(input_type: 'live-coder').order("RAND()").first
+    @status = QuizStatus.new(Candidate.order("RAND()").first)
+    @answer = @question.answers.order("RAND()").first
+  end
+
+  def summary
+  end
+
+  def thankyou
+  end
+
+  def saved
+  end
+end

app/views/candidate/question.html.erb

@@ -0,0 +1,53 @@
+<%
+  content_for :title, "Skills Assessment"
+  content_for :category, @question.category
+  content_for :footer_title, "Skills Assessment"
+%>
+<form method="post" action="/question">
+  <main class="questions_tpl">
+    <h2 class="question-text"><%= @question.question %></h2>
+    <%= render partial: "questions/#{@question.input_type}" %>
+
+    <% if @status.on_summary %>
+
+      <div class="btn-container-summary">
+        <input type="submit" name="update" value="Save and return to summary">
+      </div>
+
+    <% else %>
+
+      <div class="btn-container-left">
+        <input type="submit" name="save" value="Save">
+      </div>
+      <div class="btn-container-right">
+        <input type="submit" name="submit" value="Next">
+      </div>
+
+    <% end %>
+  </main>
+</form>
+
+<!--
+<?php
+  $TotalQuestions;
+  $progressBarValue;
+  //Get Total Number of Questions
+  $TotalQuestions = "SELECT * FROM questions";
+  $result = $link->query($TotalQuestions);
+  $TotalQuestions = $result->num_rows + 1;
+
+  $progressBarValue = round($questionId/$TotalQuestions * 100);
+  $_SESSION['pBarValue'] = $progressBarValue;
+
+  $pValue = $_SESSION['pBarValue'];
+
+  if(!isset($_GET['qid'])) { ?>
+    <div class="progress ignore-margin">
+      <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $pValue; ?>"
+      aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $pValue; ?>%">
+        <span><?php echo $pValue; ?>%</span>
+      </div>
+    </div>
+  <?php }
+?>
+-->

app/views/candidate/saved.html.erb

@@ -0,0 +1,8 @@
+<p>
+  Your test results have been saved. You can visit again later with your candidate ID to complete
+  the test starting from where you left off.
+</p>
+
+<div class="btn-return">
+  <a class="btn primary-btn" href="<%= root_path %>">Return to Test</a>
+</div>

app/views/candidate/summary.html.erb

@@ -0,0 +1,2 @@
+<h1>Candidate#summary</h1>
+<p>Find me in app/views/candidate/summary.html.erb</p>

app/views/candidate/thankyou.html.erb

@@ -0,0 +1,5 @@
+<p>
+  Your answers have been submitted. We will review and your recruiter 
+  will contact you if we would like to set up an interview.
+</p>
+

app/views/candidate/welcome.html.erb

@@ -0,0 +1,43 @@
+<% content_for :title, "Skills Assessment" %>
+
+<!-- if (isset($_SESSION['candidateId'])) { ?> -->
+
+<main class="intro_tpl">
+  <h1 class="prft-heading">Oops!</h1>
+  <p>
+    Looks like you hit the browser's Back button. You can't go backwards in the test,
+    but you'll have a chance at the end to review your answers and make changes.
+  </p>
+  <a href="questions"><button>Continue Test</button></a>
+</main>
+
+<!-- <?php } else { ?> -->
+
+<main class="intro_tpl">
+  <h1 class="prft-heading">Let's Get Started</h1>
+  <p>
+    This is a skills assessment test. It's the first step in the process of interviewing
+    for a Front-End Development position with Perficient Digital.
+  </p>
+  <p>
+    The questions will test your knowledge in the areas of HTML, CSS, and JavaScript.
+    Please note that you can <strong>only move forward through the test</strong>, not back,
+    and you <strong>must attempt to answer the question</strong> before moving to the
+    next one. You'll have an opportunity at the end of the test to review and update your
+    answers if need be. At any time, you may save your progress and log back in to continue
+    taking the test from where you left off.
+  </p>
+  <p>
+    Please answer to the best of your ability&mdash;it's totally okay to say
+    "I don't know"!&mdash;and above all, relax and have fun! Once you submit your
+    answers, we will review your assessment and your recruiter will be in touch.
+  </p>
+
+  <form method="POST" action="assets/validate_candidate.php">
+    <div class="form-group">
+      <label for="userid">What's your User ID?</label>
+      <input type="text" id="userId" name="userId" required/>
+    </div>
+    <button type="submit">Begin</button>
+  </form>
+</main>

app/views/layouts/_footer.html.erb

@@ -0,0 +1,5 @@
+<footer>
+  <div class="footer_title"><h2><%= yield(:footer_title) %></h2></div>
+  <div class="pd_logo"><%= image_tag("perficientdigital.png",  alt:"Perficient Digital") %></div>
+  <div class="footer_yellow-bar slantleft slantright">&nbsp;</div>
+</footer>

app/views/layouts/application.html.erb

@@ -1,14 +1,38 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>SkillAssessmentApp</title>
+  <html lang="en" class="no-js">
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <%= csrf_meta_tags %>
 
-    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
-  </head>
+    <title><%= yield(:title) %></title>
 
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <script src="{{assets}}/scripts/lib/modernizr.js"></script>
+  </head>
   <body>
-    <%= yield %>
+    <div class="layout">
+      <% if content_for?(:category) %>
+
+        <header>
+          -- NO PROGRESS BAR ON EDITS --
+          <div class="page-title slash-left">
+            <div>Section: <%= yield(:category) %></div>
+          </div>
+        </header>
+
+      <% else %>
+
+        <header class="no-progressbar">
+          <div class="page-title slash-left">
+            <div>Perficient Digital Skills Assessment</div>
+          </div>
+        </header>
+
+      <% end %>
+      <%= yield %>
+    </div>
+    <%= render partial: 'layouts/footer' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
   </body>
 </html>

app/views/questions/_checkbox.html.erb

@@ -0,0 +1,20 @@
+<div class="content-well">
+
+  <%
+    @question.input_options.each do | option |
+    option_id = "#{option.parameterize}_#{@question.to_i}"
+  %>
+    <div class="form-group-multiples">
+      <input type="checkbox" class="checkbox"
+             name="input_checkbox_<%= @question.to_i %>[]"
+             id="check_<%= option_id %>"
+             value="<%= option %>"
+             <%= "checked=\"checked\"" if Array(@answer.answer).include?(option) %>
+             >
+      <label for="check_<%= option_id %>"><%= option %></label>
+    </div>
+  <% end %>
+
+  -- MOVE TO FLASH HASH --
+  <div class="error">Please select or enter an answer.</div>
+</div>

app/views/questions/_live-coder.html.erb

@@ -0,0 +1,41 @@
+<div class="js-error">
+  Please revisit this page with JavaScript enabled to modify your answer.
+</div>
+
+<div data-id="live-coder-finish-later">
+  <p class="warning">
+    This is a question where you will be asked to write code, and it utilizes a JavaScript-enabled
+    environment. It looks like JavaScript is not loaded for some reason. Please check the box below
+    to acknowledge that you agree to come back at a later time to finish answering this question
+    before you can submit the test.
+  </p>
+  <input type="checkbox" class="checkbox" name="live-coder-later" value="check_1" id="check_1" />
+  <label for="check_1">I will come back later to finish this live coding question</label>
+</div>
+
+<div data-id="live-coder-answer">
+  <%
+     # answers inserted dynamically via jQuery .load()
+     # to check for JS capability/enabled
+  %>
+
+  <div class="code-input">
+    <label for="code-html">HTML</label>
+    <textarea data-id="code-html" name="code-html"><%= @answer.answer.try(:[], ['html']) %></textarea>
+  </div>
+
+  <div class="code-input">
+    <label for="code-css">CSS</label>
+    <textarea data-id="code-css" name="code-css"><%= @answer.answer.try(:[], ['css']) %></textarea>
+  </div>
+
+  <div class="code-input">
+    <label for="code-js">JS</label>
+    <textarea data-id="code-js" name="code-js"><%= @answer.answer.try(:[], ['js']) %></textarea>
+  </div>
+
+  -- MOVE TO FLASH HASH --
+  <div class="error">You must write code in one of the above textareas to progress.</div>
+
+  <div class="results" data-id="results"></div>
+</div>

app/views/questions/_radio.html.erb

@@ -0,0 +1,20 @@
+<div class="content-well">
+
+  <%
+    @question.input_options.each do | option |
+    option_id = "#{option.parameterize}_#{@question.to_i}"
+  %>
+    <div class="form-group-multiples">
+      <input type="radio" class="radio"
+             name="input_radio_<%= @question.to_i %>"
+             id="radio_<%= option_id %>"
+             value="<%= option %>"
+             <%= "checked=\"checked\"" if @answer.answer == option %>
+             >
+      <label for="radio_<%= option_id %>"><%= option %></label>
+    </div>
+  <% end %>
+
+  -- MOVE TO FLASH HASH --
+  <div class="error">Please select or enter an answer. (The character limit for a textarea answer is 1000)</div>
+</div>

app/views/questions/_text.html.erb

@@ -0,0 +1,11 @@
+<div class="form-group">
+
+  <label for="textArea">Enter answer here</label>
+  <textarea id="textArea" name="textarea" rows="10"><%= @answer.answer %></textarea>
+
+  <div class="chars">Characters remaining: <span></span></div>
+
+  -- MOVE TO FLASH HASH --
+ <div class="error">Please select or enter an answer. (The character limit for a textarea answer is 1000)</div>
+
+</div>

app/workers/quiz_status.rb

@@ -20,4 +20,27 @@ class QuizStatus
   def can_submit
     on_summary && candidate.answered_questions.count == candidate.questions.count
   end
+
+  # <?php
+  #   $TotalQuestions;
+  #   $progressBarValue;
+  #   //Get Total Number of Questions
+  #   $TotalQuestions = "SELECT * FROM questions";
+  #   $result = $link->query($TotalQuestions);
+  #   $TotalQuestions = $result->num_rows + 1;
+  #
+  #   $progressBarValue = round($questionId/$TotalQuestions * 100);
+  #   $_SESSION['pBarValue'] = $progressBarValue;
+  #
+  #   $pValue = $_SESSION['pBarValue'];
+  #
+  #   if(!isset($_GET['qid'])) { ?>
+  #     <div class="progress ignore-margin">
+  #       <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $pValue; ?>"
+  #       aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $pValue; ?>%">
+  #         <span><?php echo $pValue; ?>%</span>
+  #       </div>
+  #     </div>
+  #   <?php }
+  # ?>
 end

config/routes.rb

@@ -1,3 +1,10 @@
 Rails.application.routes.draw do
+  get "/welcome",  to: 'candidate#welcome',  as: :welcome
+  get "/thankyou", to: 'candidate#thankyou', as: :thankyou
+  get "/saved",    to: 'candidate#saved',    as: :saved
+  get "/summary",  to: 'candidate#summary',  as: :summary
+  get "/question", to: 'candidate#question', as: :question
+
+  root to: 'candidate#welcome'
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 end