JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page" id="level-1" data-theme="a" data-title="Beer Quiz - Level 1" data-add-back-btn="true">
<header data-role="header">
<h1 class="ui-title" role="heading">Level 1</h1>
<div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">
<div class="score"></div>
</div>
</header>
<label for="company">Company:</label>
<input type="text" name="name" id="user_input" value="" /> <a href="#" id="check_answer" data-role="button">Check</a>
<div data-role="popup" class="correct" data-overlay-theme="a" data-theme="a"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>Correct! That will give you 1 point!</p>
</div>
<div data-role="popup" class="incorrect" data-overlay-theme="a" data-theme="a"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>That was the wrong answer...
<br />Please try again!</p>
</div>
<div data-role="popup" class="empty_input" data-overlay-theme="a" data-theme="a"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>Please enter a company name...</p>
</div>
</div>
JavaScript
$(function () {
var db = getLocalStorage();
var score = 0
,level = 0;
function getLocalStorage() {
try {
if (window.localStorage) return window.localStorage;
} catch (e) {
return undefined;
}
}
// What if .toLowerCase() could be called .lower()?
function lower(input) {
return input.toLowerCase();
}
function updateScore() {
score = +db.getItem('score') || 0;
$('.score').html('Score: ' + score);
}
levels = [
{
question: 'what?',
answer: 'lol'
},
{
question: 'what2?',
answer: 'lol2'
}
];
function make(id) {
$('.ui-title').html('Level ' + score);
$('label').html(levels[score].question);
$('#user_input').val('');
}
make(score);
// Load the levels function when checking answers.
$('#check_answer').on('click', function (e) {
if ($('#user_input').val() == levels[score].answer) {
$('.correct').popup('open');
db.setItem('score', score += 1);
updateScore();
make(score);
}else{
$('.incorrect').popup('open');
}
});
});