JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<link href='http://fonts.googleapis.com/css?family=Trocchi' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet' type='text/css'>


<button id="next">Next</button>
<button id="correct">&#x2713;</button>
<button id="incorrect">&#x2717;</button>
<div>
<h1>Question</h1>
<p>Answer</p>
</div>

CSS

body {
    background: #eee;
    font-family: 'Trocchi';
}

div {
    margin: 25px;
    padding: 25px;
    background: #fff;
}

h1 {
    font-size: 2em;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

p {
    text-align: center;
    font-family: 'Pontano Sans', sans-serif;
}

#correct, #incorrect {
    background: none;
    border: 0;
}

#correct:hover, #incorrect:hover {
    cursor: pointer;
}

#correct {
    color: green;
}

#incorrect {
    color: red;
}

JavaScript

(function( $ ) {
  $.fn.randomItem = function() {
  
    return this[Math.floor(Math.random()*this.length)]

  };
})( jQuery );

var cards = [
    {
        question: "Who does trade hurt?",
        answer: "Inefficient domestic producers"
    },
    {
        question: "What is a common fallacy concerning the destruction of property?",
        answer: "The broken window fallacy"
    },
    {
        question: "What is ",
        answer: "Robert Browning"
    },
    {
        question: "The Lady of Shalott",
        answer: "Tennyson"
    },
    {
        question: "The Cry of the Children",
        answer: "Elizabeth Barrett Browning"
    },
    {
        question: "Jenny",
        answer: "Dante Gabriel Rossetti"
    }
];

var card = $(cards).randomItem();

var $question = $('div h1');
var $answer = $('div p');

$('#next').on('click', function() {
    $answer.slideDown();
});
                
$('#correct').on('click', function() {
    nextCard();
});

$('#incorrect').on('click', function() {
    nextCard();
});

function nextCard() {
    card = $(cards).randomItem();
    $question.text(card.question);
    $answer.hide().text(card.answer);
};

nextCard();