-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (67 loc) · 3.7 KB
/
index.html
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" sizes="180x180" href="/detective-sql/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/detective-sql/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/detective-sql/favicon-16x16.png">
<link rel="manifest" href="/detective-sql/site.webmanifest">
<link rel="stylesheet" href="styles/main.css">
<script src="https://kit.fontawesome.com/9477a9faa7.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.15.3/tingle.min.js"
integrity="sha512-plGUER9JkeEWPPqQBE4sdLqBoQug5Ap+BCGMc7bJ8BXkm+VVj6QzkpBz5Yv2yPkkq+cqg9IpkBaGCas6uDbW8g=="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tingle/0.15.3/tingle.min.css"
integrity="sha512-j1u8eUJ4f23xPPxwOrLUPQaCD2dwzNqqmDDcWS4deWsMv2ohLqmXXuP3hU7g8TyzbMSakP/mMqoNBYWj8AEIFg=="
crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins&display=swap" rel="stylesheet">
<title>Detective SQL</title>
</head>
<body>
<div class="hero">
<h1>🔎 Detective SQL</h1>
<h3>Solve crimes using Structured Query Language</h3>
</div>
<div class="missions">
<div>
<h2>Mission 1: Unauthorised Transaction</h2>
<hr>
<p>
Test your knowledge of basic SELECT queries in this exciting introductory mystery with Detective SQL.
The local bank has been robbed overnight, and it is up to you to query your way around town to find the
culprit. Piece together the clues to find the robber and bring him to justice. Good luck!
</p>
<a id="start-link"><i class="fas fa-play"></i> Play Now!</a>
<br>
<br>
</div>
</div>
<script type="text/javascript">
var modal = new tingle.modal({
cssClass: ['fr'],
footer: true,
closeMethods: ['overlay', 'escape', 'button'],
closeLabel: 'Close'
});
//Redirect user to narrative1.html//
modal.setContent(`
<h1>Before You Start!</h1>
<p>When you're solving a problem, you'll be given the task in a banner at the top of the screen.</p>
<p>You'll always see an outline of the database schema on the left of the screen. This shows the table(s) involved
in the exercise along with the column names and data types. This will help you construct your queries, because it
tells you exactly how to spell the column names and how you should be looking data up.</p>
<p>On the right will be a way to create your query. It will either be a jigsaw-like builder or a space in which to type your query. When you run your query, the page should automatically take you to a results table, or it may display an error if the query couldn't be run. A lot of the time, this will be a genuine SQL error. You can find more details on how to use the builder/writer on their respective pages.</p>
`);
modal.addFooterBtn('Let\'s Start!', 'tingle-btn orange', function() {
window.location.href = "narrative1.html";
});
var start_link = document.getElementById('start-link');
start_link.addEventListener('click', function() {
modal.open();
});
</script>
</body>
</html>