arrow links between problem views

Author: Jon Janelle

app/Http/Controllers/ProblemController.php

@@ -56,12 +56,11 @@ private static function loadProblemData($category, $sortCat="id",$order="asc"){
     Session::put($category, $data);
   }
 
-
-
   /*
    * View a problem from a given $category with id $pid
+   * if $feedback is true, then showing problem after an answer submit.
    */
-  public function show($category, $pid){
+  public function show($category, $pid, $feedback=false, $correct=false, $userResponse=null){
       if (!Session::has($category)) { //load problem data if needed
         $this->loadProblemData($category);
       }
@@ -71,19 +70,31 @@ public function show($category, $pid){
 
       //Retrieve data from session (rather than querying db again.)
       $pData = Session::get($category);
-      foreach ($pData as $p) { //linear search for id (ids not necessarily ordered)
+      for ($i=0; $i<$pData->count(); $i++) {
+        $p=$pData[$i];
+        //linear search for id (ids not necessarily ordered)
         if ($p->id==$pid){
+          $prev = 'None';
+          $next = 'None';
+          if ($i>0) { $prev=$pData[$i-1]->id; }
+          if ($i<$pData->count()-1) { $next=$pData[$i+1]->id; }
+          $solved = [];
+          if (!Auth::guest()) { $solved = Session::get('solved');}
+
           return view('problem')->with(['problem'=>$p,
                                         'category'=>$category,
                                         'feedback'=>false,
-                                        'next'=>'None',
-                                        'prev'=>'None',
-                                        'comments'=>$comments]);
+                                        'next'=>$next,
+                                        'prev'=>$prev,
+                                        'comments'=>$comments,
+                                        'feedback'=>$feedback,
+                                        'correct'=>$correct,
+                                        'userAns'=>$userResponse,
+                                        'solved'=>$solved]);
         }
       }
 
       //If requested problem not found, then go to listing page for category.
-      //TO DO: return error message indicating requested problem not found.
       return view('problemlist')->with(['problems'=>$pData,
                                         'category'=>$category]);
   }
@@ -101,7 +112,7 @@ public function checkResponse(Request $request, $category, $pid) {
     $pData = Session::get($category);
     $correct = false;
     $userResponse = $request->input("answer-input");
-    $comments = Auth::guest()?null:$this->getCommentsByProblem($pid);
+
     foreach ($pData as $p) {
       if ($p->id==$pid){
         if ($p->answer==floatval($userResponse)){
@@ -110,13 +121,8 @@ public function checkResponse(Request $request, $category, $pid) {
             $this->updateUserData($p);
           }
         }
-        return view('problem')->with(['problem'=> $p,
-                                      'feedback'=>true,
-                                      'correct'=>$correct,
-                                      'userAns'=>$userResponse,
-                                      'next'=>'None',
-                                      'prev'=>'None',
-                                      'comments'=>$comments]);
+        return $this->show($category, $pid, true, $correct, $userResponse);
+
       }
     }
     return view('problemlist')->with(['problems'=>$pData,

public/css/home.css

@@ -1,3 +1,22 @@
 .home-container{
   margin: 3%;
 }
+
+.home-panel .panel-heading{
+  font-weight: bold;
+}
+
+#leaderboard {
+  width: 90%;
+  height: 80vh;
+  margin: 0 auto;
+  border-radius: 5px;
+  text-align: center;
+
+}
+
+#leaderboard .panel-heading {
+  font-size: 1.2em;
+  letter-spacing: 3px;
+  font-weight: bold;
+}

public/css/leaderboard.css

@@ -54,6 +54,8 @@
 .spacer-sm {
   margin: 5px;
 }
+
+
 #left-link{
   float: left;
 }
@@ -63,12 +65,13 @@
 }
 
 .arrow-link {
+  font-size: 1.4em;
   transition: color .5s ease;
-  color: #aac;
+  color: #777;
 }
 .arrow-link:hover {
   transition: color .5s ease;
-  color: #fff;
+  color: #333;
 }
 
 #problem-title {

public/css/problems.css

@@ -18,7 +18,7 @@
   <!--begin account summary section-->
   <div class="row">
     <div class="col col-md-12">
-      <div class="panel panel-info shadow-transition" id="leaderboard">
+      <div class="panel panel-info shadow-transition home-panel">
         <!-- Default panel contents -->
         <div class="panel-heading">Account Overview</div>
         <table class="table table-hover table-striped">
@@ -47,7 +47,7 @@
   <!--begin problem history section-->
   <div class="row">
     <div class="col col-md-12">
-      <div class="panel panel-info shadow-transition" id="leaderboard">
+      <div class="panel panel-info shadow-transition home-panel">
         <!-- Default panel contents -->
         <div class="panel-heading">Problem History</div>
         <table class="table table-hover table-striped">
@@ -80,7 +80,7 @@
   <!--begin comment history section-->
   <div class="row">
     <div class="col col-md-12">
-      <div class="panel panel-info shadow-transition" id="leaderboard">
+      <div class="panel panel-info shadow-transition home-panel">
         <!-- Default panel contents -->
         <div class="panel-heading">Comment History</div>
         <table class="table table-hover table-striped">

resources/views/home.blade.php

@@ -1,6 +1,6 @@
 @extends('master.master')
 @push('head')
-  <link rel="stylesheet" href= "/css/leaderboard.css">
+  <link rel="stylesheet" href= "/css/home.css">
 @endpush
 
 @section('content')

resources/views/leaderboard.blade.php

@@ -9,33 +9,38 @@
 @section('content')
 
   <div class="header" id="problem-title">
-    @if ($prev !='None')
-      <div id="left-link">
-        <a href="/problems/{{$problem->category}}/{{$prev}}">
-          <span class="glyphicon glyphicon-circle-arrow-left arrow-link"></span>
-        </a>
-      </div>
-    @endif
+
 
     {{$problem->category}} - {{$problem->name}}
-    @if ($next!='None')
-      <div id="right-link">
-        <a href="/problems/{{$problem->category}}/{{$next}}">
-          <span class="glyphicon glyphicon-circle-arrow-right arrow-link"></span>
-        </a>
-      </div>
-    @endif
+
 
     <div class="sub-header">
       <div class="alert alert-info" id='sub-head-alert'>
+        @if ($prev !='None')
+          <div id="left-link">
+            <a href="/problems/{{$problem->category}}/problem/{{$prev}}">
+              <span class="glyphicon glyphicon-circle-arrow-left arrow-link"></span>
+            </a>
+          </div>
+        @endif
         Difficulty: {{$problem->difficulty}}
+        @if ($next!='None')
+          <div id="right-link">
+            <a href="/problems/{{$problem->category}}/problem/{{$next}}">
+              <span class="glyphicon glyphicon-circle-arrow-right arrow-link"></span>
+            </a>
+          </div>
+        @endif
       </div>
       XP: {{$problem->xp}}
+      @if (in_array($problem->id,$solved))
+       <span class="glyphicon glyphicon-ok green-check"></span>
+      @endif
     </div>
   </div> <!-- end header -->
   <div class="pad-20"><!-- begin problem display -->
     <div class="img-box light-shadowbox">
-      <img src={{$problem->image}} alt="problem image">
+      <img src="{{$problem->image}}" alt="problem image">
     </div>
 
     @if ($feedback)
@@ -65,7 +70,7 @@
         </h3>
         <div class="input-group">
           <span class="input-group-addon" id="submit-addon1"><span class="glyphicon glyphicon-pencil"></span></span>
-          <input type="text" class="form-control" id="answer-input" name="answer-input" aria-describedby="submit-addon1">
+          <input type="text" class="form-control" id="answer-input" name="answer-input" aria-describedby="submit-addon1" required="true">
         </div>
         <div class="spacer-sm">
           <input class="btn btn-primary" type="submit" value="Submit">
@@ -92,7 +97,7 @@
           <form method="POST" id="comment-form" action="/problems/{{$problem->category}}/problem/{{$problem->id}}/comment">
             {{ csrf_field() }}
             <div class="form-group">
-              <textarea rows="3" class="form-control" id="comment-input" name="comment-input" placeholder="posts containing profanity, insults, or answers may be removed at the discretion of the moderator"></textarea>
+              <textarea rows="3" class="form-control" id="comment-input" name="comment-input" placeholder="Posts containing profanity, insults, or answers may be removed at the discretion of the moderator." required></textarea>
               <input class="btn btn-primary" id="comment-submit" type="submit" value="Post">
             </div>