Ajaxify

README.md

@@ -1,12 +1,19 @@
-### Dolphin Flash Cards  
-Created by Chris, Phil, Anne, Armando, Jaime and Mason
+Restful Dolphins Flashcards
+===========================
+
+  Created by Chris, Phil, Anne, Armando, Jaime and Mason
 
 ### Features:
-1. etc
-2. etc
-4. etc
-5. etc
-6. 
+1. Flash Cards Quiz
+2. Supports Multiple Decks
+3. Tracking of Number of Correct and Incorrect Guesses
+4. User Login Authentication
+5. New User Register
+6. Arabic, French and Chemistry sample decks
+
+**Try on Heroku:**  
+http://obscure-wave-1778.herokuapp.com/
+
 
 **Trello at:**  
 https://trello.com/b/cU6Dl8uK/dolphin-restful-cards  

app/controllers/deck.rb

@@ -8,7 +8,7 @@
   User.find(session[:id]).rounds.create(deck_id: deck.id)
   session[:cards] = deck.cards.shuffle
   @card = session[:cards].pop
-  erb :show_card
+  erb :show_card, layout: false
 end
 
 post '/decks/:deck_id/cards/:card_id' do
@@ -18,11 +18,12 @@
     session.delete(:cards)
     @answer_eval = (params[:answer].downcase == @current_card.answer.downcase)
     assign_score(@answer_eval)
+    p "inside nil"
     redirect to("/users/stats/#{params[:deck_id]}")
   else
     @answer_eval = (params[:answer].downcase == @current_card.answer.downcase)
     assign_score(@answer_eval)
-    erb :show_card
+    erb :show_card, layout: false
   end
 end
 
@@ -33,6 +34,6 @@
     session.delete(:cards)
     redirect to("/users/stats/#{params[:deck_id]}")
   else
-    erb :show_card
+    erb :show_card, layout: false
   end
 end

app/controllers/user.rb

@@ -1,11 +1,15 @@
 get '/users/new' do
-  erb :create_user
+  erb :create_user, layout: false
 end
 
 post '/users' do
-  new_user = User.create params
-  session[:id] = new_user.id
-  redirect '/decks'
+  @user = User.create params
+  if @user.valid?
+    session[:id] = @user.id
+    redirect '/decks'
+  else
+    erb :create_user, layout: false
+  end
 end
 
 
@@ -14,17 +18,19 @@
 end
 
 get '/users/stats/:deck_id' do
-  p params
   @user = User.find(session[:id])
   @deck = Deck.find(params[:deck_id].to_i)
-  erb :show_stats
+  erb :show_stats, layout: false
 end
 
 post '/login' do
-  if auth_user(params)
+  auth_user(params)
+  p params
+  if loggedin?
     redirect '/decks'
   else
-    redirect to '/'
+    @failed_loggin = true
+    erb :index, layout: false
   end
 end
 

app/helpers/user.rb

@@ -1,15 +1,13 @@
 helpers do
   def loggedin?
-    !!session["id"]
+    !!session[:id]
   end
 
   def auth_user(params)
-    @user = User.find_by_username(params[:username])
-    if @user && @user.password == params[:password]
-        session[:id] = @user.id
-        true
-    else
-      false
+    user = User.find_by_username(params[:username])
+    if user && user.password == params[:password]
+        session[:id] = user.id
+        user
     end
   end
 end

app/views/_error.erb

@@ -0,0 +1,5 @@
+<% if user && user.errors.messages[param] %>
+  <% user.errors.messages[param].each do |error| %>
+    <p class="error-msg"><%= error %></p>
+  <% end %>
+<% end %>

app/views/_invalid_login.erb

@@ -0,0 +1,5 @@
+<% if user  %>
+  <% user.errors.messages[param].each do |error| %>
+    <p class="error-msg"><%= error %></p>
+  <% end %>
+<% end %>

app/views/create_user.erb

@@ -3,10 +3,9 @@
 </div>
 
 <form id="signup_form" action="/users" method = "post">
+  <%= erb :'_error', locals: {user: @user, param: :username}%>
   <h3>Username:</h3><input type="text" name="username" placeholder="Username"><br>
+  <%= erb :'_error', locals: {user: @user, param: :password}%>
   <h3>Password:</h3><input type="password" name="password" placeholder="Password"><br>
   <input type="submit" class="cool_button" value="Create Account">
-</form>
-
-
-
+</form>

app/views/index.erb

@@ -1,7 +1,8 @@
 <div  id="welcome"><h1>Welcome to Dophin Flashcards!</h1></div>
 
 <form id="login_form" action="/login" method = "post">
-   <h3>Username:</h3><input type="text" placeholder = "User Name" name="username"><br>
+   <p class="error-msg"><%= "Invalid Username or password" if @failed_loggin %></p>
+  <h3>Username:</h3><input type="text" placeholder = "User Name" name="username" value="<%= params[:username] %>"><br>
   <h3>Password:</h3><input type="password" placeholder = "Password" name="password"><br>
   <input type="submit" class="cool_button" name="submit" value="Login">
 </form>

app/views/layout.erb

@@ -15,5 +15,9 @@
   <div class="container">
     <%= yield %>
   </div>
+
+  <div class="Gir_cage">
+  <img class="GIR" src="http://media.tumblr.com/tumblr_luzhmhcIhG1qjy4vo.gif" width="300" height="190">
+</div>
 </body>
 </html>

app/views/show_card.erb

@@ -5,7 +5,7 @@
 
   <form action="/decks/<%= @card.deck_id %>/cards/<%= @card.id %>" method="post">
 
-   <h4>Question: <%= @card.question %><span id="spacer"></span> 
+   <h4>Question: <%= @card.question %><span id="spacer"></span>
     <input type="text" name="answer" placeholder="Take a Guess!" autocomplete="off"></h4>
     <input type="submit" class="card_button" value="Submit Answer">
 

app/views/show_decks.erb

@@ -1,5 +1,5 @@
 <ul>
   <% @decks.each do |deck| %>
-    <li><a href="/decks/<%= deck.id %>"><%= deck.name %></a></li>
+    <li><a class="choose-deck" href="/decks/<%= deck.id %>"><%= deck.name %></a></li>
   <% end %>
 </ul>

db/seeds.rb

@@ -11,21 +11,21 @@
 end
 
 
-CARDS = [{question: "واحد", answer: "one", deck_id: 1},
-          {question: "اثنين", answer: "two", deck_id: 1},
-          {question: "ثلاثة", answer: "three", deck_id: 1},
-          {question: "كيفك", answer: "how are you?", deck_id: 1},
-          {question: "صباح الخير", answer: "good morning", deck_id: 1},
-          {question: "مرحبا", answer: "hello", deck_id: 1},
-          {question: "d'accord", answer: "OK", deck_id: 1},
+CARDS = [{question: "one", answer: "one", deck_id: 1},
+          # {question: "اثنين", answer: "two", deck_id: 1},
+          # {question: "ثلاثة", answer: "three", deck_id: 1},
+          # {question: "كيفك", answer: "how are you?", deck_id: 1},
+          # {question: "صباح الخير", answer: "good morning", deck_id: 1},
+          # {question: "مرحبا", answer: "hello", deck_id: 1},
+            {question: "d'accord", answer: "OK", deck_id: 2},
             {question: "qui", answer: "who", deck_id: 2},
             {question: "quand", answer: "when", deck_id: 2},
-            {question: "où", answer: "where", deck_id: 2},
+            {question: "ou", answer: "where", deck_id: 2},
             {question: "pourquoi", answer: "why", deck_id: 2},
             {question: "comment", answer: "how", deck_id: 2},
             {question: "Parlez-vous anglais?", answer: "Do you speak English?", deck_id: 2},
             {question: "et", answer: "and", deck_id: 2},
-            {question: "s'il vous plaît", answer: "please", deck_id: 2},
+            {question: "s'il vous plait", answer: "please", deck_id: 2},
             {question: "merci ", answer: "thank you", deck_id: 2},
               {question:"What is the Caesium Chloride crystal structure? (abbreviation)", answer:"BCC", deck_id: 3},
               {question:"What is the Sodium Chloride (rock salt) crystal structure?", answer:"Cubic", deck_id: 3},

public/css/application.css

@@ -122,7 +122,8 @@ form {
 
 ul {
   list-style: none;
-  margin: 30px 10px auto;
+  margin: 5% auto;
+
 
 }
 
@@ -140,7 +141,7 @@ ul li {
 }
 
 ul li a {
-  color: yellow;
+  color: black;
   text-decoration: none;
 }
 
@@ -152,8 +153,6 @@ ul li a:visited {
   margin: 0 auto;
   text-align: center;
   width: 80%;
-/*  position: absolute;
-  left: 150px;*/
 }
 
 .card h2 {
@@ -213,3 +212,26 @@ ul li a:visited {
   width: 500px;
   z-index: 1;
 }
+
+.error-msg{
+  border-radius: 5px;
+  width:40%;
+  text-align: center;
+  background-color: rgb(250, 149, 149);
+}
+
+.Gir_cage {
+  margin: auto;
+
+  height: 20%;
+  position: relative;
+  top: 60%;
+  width: 40%;
+}
+
+.GIR {
+  border: 10px solid #D9CDCD;
+  display: block;
+  margin: auto;
+
+}

public/js/application.js

@@ -4,4 +4,49 @@ $(document).ready(function() {
   // when we try to bind to them
 
   // See: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
+  Dophin.addGuessListener()
+  Dophin.addDeckListener()
+
+
 });
+
+
+var Dophin = {
+
+  addGuessListener: function(){
+    $(document).on("submit","form",function(event){
+      event.preventDefault();
+      Dophin.cardGuess(this);
+    });
+  },
+
+  addDeckListener: function(){
+    $(".choose-deck").on("click",function(event){
+      event.preventDefault();
+      console.log(this)
+      Dophin.deckChoice(this);
+    })
+  },
+
+  deckChoice: function(){
+    $.ajax({
+      type: "GET",
+      url: this.deckChoice.arguments[0].attributes.href.nodeValue,
+      success: function(response){
+        $('.container').html(response)
+      }
+    })
+  },
+
+  cardGuess: function(){
+    // debugger
+    $.ajax({
+      type: "POST",
+      url: this.cardGuess.arguments[0].attributes.action.nodeValue,
+      data: $('form').serialize(),
+      success: function(response){
+        $('.container').html(response)
+      }
+    })
+  }
+}

spec/deck_controller_spec.rb

@@ -2,12 +2,12 @@
 
 describe "Deck controller" do
 
+  let(:first_deck){FactoryGirl.create(:deck)}
+  let(:first_user){FactoryGirl.create(:user)}
   before(:all) do
     FactoryGirl.create(:card)
     first_user.decks << first_deck
   end
-  let(:first_deck){FactoryGirl.create(:deck)}
-  let(:first_user){FactoryGirl.create(:user)}
 
   describe "answering a question correctly" do
     before(:each) do