JavaScript-Flashcards/source.js at main · SLMcIntyre/JavaScript-Flashcards · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$(document).ready(function () {

var colorArray=["#019875","#1E8BC3","#D91E18","#D35400","#8E44AD","#C0392B"];
var cardState;
var currentQuestion=0;
var qbank=new Array;

loadDB();

function loadDB(){
 $.getJSON("jsFlashcards.json", function(data) {
  for(i=0;i<data.length;i++){
   qbank[i]=[];
   qbank[i][0]=data[i].category;
   qbank[i][1]=data[i].name;
   qbank[i][2]=data[i].subtype;
   qbank[i][3]=data[i].explanation;

  }//for
  beginActivity();
 })//gtjson
}//loadDB

function beginActivity(){
 cardState=0;
 var color1=colorArray[Math.floor(Math.random()*colorArray.length)];
 $("#cardArea").empty();
 $("#cardArea").append('<div id="card1" class="card">' + qbank[currentQuestion][0] + '</div><br><br>');
 $("#cardArea").append('<div id="card1" class="card">' + qbank[currentQuestion][1] + '</div><br><br>');
 $("#cardArea").append('<div id="card1" class="card">' + qbank[currentQuestion][2] + '</div>');
 $("#cardArea").append('<div id="card2" class="card">' + qbank[currentQuestion][3] + '</div>');

 $("#card1").css("background-color",color1);
 $("#card2").css("background-color","#34495E");
 $("#card2").css("top","400px");
 $("#cardArea").on("click",function(){
  if(cardState!=1){
   cardState=1;
   //togglePosition();
//    $("#card1").animate({top: "-=400"}, 150, function() {cardState=0;togglePosition();});
   $("#card2").animate({top: "-=400"}, 150, function() {togglePosition2();});
  }//if
 });//click function
 currentQuestion++;
 $("#buttonArea").empty();
 $("#buttonArea").append('<div id="nextButton">NEXT</div>');
 $("#nextButton").on("click",function(){
  if(currentQuestion<qbank.length){beginActivity();}
  else{displayFinalMessage();}
 });//click function
}//beginactivity

function togglePosition(){
 if($("#card1").position().top==-400){$("#card1").css("top","400px");};
}//toggle

function togglePosition2(){
 if($("#card2").position().top==-400){$("#card2").css("top","400px");};
}//toggle2

// function displayFinalMessage(){
//  $("#buttonArea").empty();
//  $("#cardArea").empty();
//  $("#cardArea").append('<div id="finalMessage">You have finished the activity.</div>');
// }//final message

});