diff --git a/css/main.css b/css/main.css index bf9914d..2fef5bc 100644 --- a/css/main.css +++ b/css/main.css @@ -133,4 +133,69 @@ sql-exercise .sqlExInputArea input { #experienced-schema.show { display: block; -} \ No newline at end of file +} + + +/* -------------------------------------------------------- */ +/* HINT BUTTON STYLING */ +/* -------------------------------------------------------- */ + +#hint-button { + padding: 8px 12px; + background: #4a76d4; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 15px; + margin-top: 10px; +} + +#hint-button:hover { + background: #3f67bd; +} + + +/* -------------------------------------------------------- */ +/* HINT MODAL STYLING */ +/* -------------------------------------------------------- */ + +#hintModal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(3px); + z-index: 1000; +} + +#hintModalContent { + background: white; + padding: 18px; + border-radius: 8px; + max-width: 480px; + margin: 120px auto; + text-align: center; + box-shadow: 0px 4px 14px rgba(0,0,0,0.2); +} + +#closeHint { + cursor: pointer; + float: right; + font-size: 20px; + font-weight: bold; + color: #555; +} + +#closeHint:hover { + color: black; +} + +#hintText { + margin-top: 10px; + font-size: 16px; + color: #333; +} diff --git a/index.html b/index.html index 49c061e..1c8479c 100644 --- a/index.html +++ b/index.html @@ -64,10 +64,31 @@ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); - gtag('config', 'G-8F4WPDMPL5'); The SQL Murder Mystery + + + + @@ -85,20 +106,11 @@ @@ -126,27 +138,20 @@

New to SQL?

This exercise is meant more as a way to practice SQL skills than a full tutorial. If you've never used SQL at all, try the walkthrough. If you really want to learn a lot about SQL, you may prefer a complete tutorial like Select Star SQL. -

If you're comfortable with SQL, you can dive in below!

-

Experienced SQL sleuths start here

- A crime has taken place and the detective needs your help. The detective gave you the crime scene report, but you somehow lost it. You vaguely remember that the crime was a ​murder​ that occurred sometime on ​Jan.15, 2018​ and that it took place in ​SQL City​. Start by retrieving the corresponding crime scene report from the police department’s database. + A crime has taken place and the detective needs your help...

Exploring the Database Structure

-

- Experienced SQL users can often use database queries to infer the structure of a database. But each database system has different ways of managing this information. The SQL Murder Mystery is built using SQLite. Use this SQL command to find the tables - in the Murder Mystery database. -

- @@ -154,44 +159,23 @@

Exploring the Database Structure

-
-
-

- Besides knowing the table names, you need to know how each table is structured. The way this works is also dependent upon which database technology you use. Here's how you do it with SQLite. -

- - - -
-
- + +
-

The rest is up to you!

-

- If you're really comfortable with SQL, you can probably get it from here. -

-

- But click here to show the schema diagram. - -

-

- And you can always go to the walkthrough. -

- - + + +
- "> - +
+
@@ -205,79 +189,13 @@

Check your solution

Credits

-

The SQL Murder Mystery was created by Joon Park and Cathy He while they were Knight Lab fellows. See the GitHub repository for more information.

-

Adapted and produced for the web by Joe Germuska.

-

This mystery was inspired by a crime in the neighboring - Terminal City.

-

Web-based SQL is made possible by SQL.js

-

SQL query custom web components created and released to the public domain by Zi Chong Kao, creator of Select Star SQL.

-

Detective illustration courtesy of Vectors by Vecteezy

-

Original code for this project is released under the MIT License

-

Original text and other content for this project is released under Creative Commons CC BY-SA 4.0

+

The SQL Murder Mystery was created by...

@@ -287,6 +205,37 @@

Credits

}) + + + diff --git a/scripts/main.js b/scripts/main.js index 1757d73..56cbc59 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -82,7 +82,7 @@ function datatable (data) { // SQL Quiz Component ////////////////////////// -function setdiff(a, b) { // https://stackoverflow.com/a/36504668 +function setdiff(a, b) { var seta = new Set(a); var setb = new Set(b); var res = new Set([...seta].filter(x => !setb.has(x))); @@ -273,7 +273,6 @@ class sqlExercise extends HTMLElement { solution_u.sort(); } var verdict = arraysEqual(submission_u, solution_u) ? "Correct" : "Incorrect"; - // http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html verdict_div.innerText = verdict; }); } @@ -345,24 +344,56 @@ customElements.define('sql-exercise', sqlExercise); ////////////////////////// function arraysEqual(a,b) { - /* - https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript - Array-aware equality checker: - Returns whether arguments a and b are == to each other; - however if they are equal-lengthed arrays, returns whether their - elements are pairwise == to each other recursively under this - definition. - */ if (a instanceof Array && b instanceof Array) { - if (a.length != b.length) { // assert same length + if (a.length != b.length) { return false; } - for (var i=0; i { + if (index < hints.length) { + hintBox.style.display = "block"; + hintBox.innerText = hints[index]; + index++; + } else { + hintBox.style.display = "block"; + hintBox.innerText = "No more hints!"; + } + }); + + btnReset.addEventListener("click", () => { + index = 0; + hintBox.style.display = "none"; + hintBox.innerText = ""; + }); +})();