Flashcards

Flashcards/accordion

by mrjordy

HTML

<script src="https://code.jquery.com/jquery-1.8.1.js"></script>
<h1>
āáăà ĀÁĂÀ
ĒÉĔÈ ēéĕè
īíĭì ĪÍĬÌ
ŌÓŎÒ ōóŏò
ŪÚŬÙ ūúŭù
</h1>

<div id="accordion" >
  <button id="Previous" >Previous</button>
  <button id="Random" >Random</button>
  <button id="Next">Next</button>
  <h2 id="accordion-toggle"></h2>
  <div id="accordion-content"><p></p></div>
</div>

CSS

body {font-family: sans-serif}

#accordion-toggle {
  cursor: pointer;
  margin: 40px 0 20px 0;
  font-size: 28px;
}

#accordion-content {
  display: none;
  font-size: 24px;
}

#accordion-content.default {
  display: block;
}
#accordion {
  text-align: center;
}

JavaScript

var idioms = [
	 	"ni", "asdf", 
    "His name is Yao Ming", "asdf",
    "He is Chinese", "asdf",
    "What is his nationality?", "asdf",
    "4", "asdf",
    "5", "asdf",
    "6", "asdf",
	  "7", "asdf",
    "8", "asdf",
    "9", "asdf",
    "10", "asdf",
    "11", "asdf",
	  "12", "asdf",
    "13", "asdf",
    "14", "asdf",
    "15", "asdf",
    "16", "asdf",
	  "17", "asdf",
    "18", "asdf",
    "19", "asdf",
    "20", "asdf", 
    "21", "asdf",
    "22", "asdf",
    "23", "asdf",
    "24", "asdf",
    "25", "asdf",
    "26", "asdf",
	  "27", "asdf",
    "28", "asdf",
    "29", "asdf",
    "30", "asdf", 
    "31", "asdf",
    "32", "asdf",
    "33", "asdf",
    "34", "asdf",
    "35", "asdf",
    "36", "asdf",
	  "37", "asdf",
    "38", "asdf",
    "39", "asdf",
    "40", "asdf", 
    "41", "asdf",
    "42", "asdf",
    "43", "asdf",
    "44", "asdf",
    "45", "asdf",
    "46", "asdf",
	  "47", "asdf",
    "48", "asdf",
    "49", "asdf",
];

var index = 0;
var increment = 2;
//var random = Math.floor(Math.random() * (5) + 1);
var $accordion_toggle = $('#accordion-toggle');
var $accordion_content = $('#accordion-content');

function incrementIndex () {
	index += increment;
        
    if (index >= idioms.length) {
        index = 0;
    }
}

function randomIndex () {                              //
	index = Math.floor(Math.random() * (idioms.length + 2) / 2) * 2;
}

function decrementIndex () {
	index -= increment;
        
    if (index < 0) {
        index = (idioms.length - increment);
    }
}

function updateIdioms () {
	$accordion_toggle.html(idioms[index]);
    $accordion_content.html(idioms[index + 1]);
}

function onNextClick () {	
	 $accordion_content.slideUp(function () {
        incrementIndex();
        updateIdioms();
     });
}
function onRandomClick () {	                                     //       //
	 $accordion_content.slideUp(function () {
        randomIndex();
        updateIdioms();
     });
}

function onPreviousClick ()...