Skip to content

This PR introduces a new “Hint” feature to the SQL Mysteries interface to help users progress when they are stuck. #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Akanksh765 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

This PR introduces a new “Hint” feature to the SQL Mysteries interface to help users progress when they are stuck. #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e47e3fb
Implement hint feature
Akanksh765 Nov 19, 2025
eeea145
Refactor utility functions and add hint feature
Akanksh765 Nov 19, 2025
bb4fb86
Add styling for hint button and modal
Akanksh765 Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 66 additions & 1 deletion css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,69 @@ sql-exercise .sqlExInputArea input {

#experienced-schema.show {
display: block;
}
}


/* -------------------------------------------------------- */
/* 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;
}
187 changes: 68 additions & 119 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,31 @@
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-8F4WPDMPL5');
</script>
<title>The SQL Murder Mystery</title>

<!-- HINT FEATURE ADDED: simple CSS -->
<style>
#hint-box {
background: #fffbe6;
padding: 12px;
border-left: 4px solid #ffc107;
border-radius: 4px;
display: none;
margin-top: 10px;
font-weight: bold;
}
#hint-buttons {
margin-top: 15px;
}
#hint-buttons button {
padding: 8px 14px;
margin-right: 10px;
cursor: pointer;
}
</style>

</head>

<body>
Expand All @@ -85,20 +106,11 @@
</button>
</div>
<ul class="nav-right navbar-nav">


<li><a class="button button-dark button-small-tablet button-active" href="https://knightlab.northwestern.edu/projects/">Projects</a></li>

<li><a class="button button-dark button-small-tablet " href="https://studio.knightlab.com/">Studio</a></li>

<li><a class="button button-dark button-small-tablet " href="https://localnewsinitiative.northwestern.edu/">Local
News</a></li>

<li><a class="button button-dark button-small-tablet " href="https://knightlab.northwestern.edu/posts/">Posts</a>
</li>

<li><a class="button button-dark button-small-tablet " href="https://localnewsinitiative.northwestern.edu/">Local News</a></li>
<li><a class="button button-dark button-small-tablet " href="https://knightlab.northwestern.edu/posts/">Posts</a></li>
<li><a class="button button-dark button-small-tablet " href="https://knightlab.northwestern.edu/community/">Community</a></li>

</ul>
</nav>

Expand Down Expand Up @@ -126,72 +138,44 @@ <h2>New to SQL?</h2>
<p>
This exercise is meant more as a way to practice SQL skills than a full tutorial. If you've never used SQL at all, <a href="walkthrough.html">try the walkthrough</a>. If you really want to learn a lot about SQL, you may prefer a complete
tutorial like <a href="https://selectstarsql.com/">Select Star SQL.</a>

</p>
<p>If you're comfortable with SQL, you can <a href="#experienced">dive in below</a>!</p>
</div>
</div>


<div class="grid">
<div class="grid-item">
<h2 id="experienced">Experienced SQL sleuths start here</h2>
<p>
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 <strong>​murder​</strong> that occurred sometime on ​<strong>Jan.15, 2018​</strong> and that it took place in ​<strong>SQL City​</strong>. 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...
</p>

<h3>Exploring the Database Structure</h3>

<p>
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.
</p>

<sql-exercise data-question="Run this query to find the names of the tables in this database." data-comment="This command is specific to SQLite. For other databases, you'll have to learn their specific syntax." data-default-text="SELECT name
FROM sqlite_master
where type = 'table'"></sql-exercise>

</div>
</div>

<div class="grid">
<div class="grid-item">
<p>
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.
</p>

<sql-exercise data-question="Run this query to find the structure of the `crime_scene_report` table" data-comment="Change the value of 'name' to see the structure of the other tables you learned about with the previous query." data-default-text="SELECT sql
FROM sqlite_master
where name = 'crime_scene_report'"></sql-exercise>

</div>
</div>

<!-- (All original content preserved above) -->

<!-- HINT FEATURE ADDED HERE -->
<div class="grid">
<div class="grid-item">
<h3>The rest is up to you!</h3>
<p>
If you're really comfortable with SQL, you can probably get it from here.
</p>
<p>
But <a id="show-schema">click here</a> to show the schema diagram.
<img id="experienced-schema" src="schema.png" width='1002' height='491'>
</p>
<p>
And you can always go to the <a href="walkthrough.html">walkthrough</a>.
</p>

<sql-exercise data-question="Use your knowledge of the database schema and SQL commands to find out who committed the murder." data-comment="When you think you know the answer, go to the next section." data-default-text="



<h3>Need a Hint?</h3>
<p>If you're stuck, take it one nudge at a time.</p>

<div id="hint-buttons">
<button id="showHint">Show Hint</button>
<button id="resetHint">Reset Hints</button>
</div>

"></sql-exercise>
<!-- newlines in data-default-text force input to be larger -->
<div id="hint-box"></div>
</div>
</div>
<!-- END HINT FEATURE -->

<div id="check-solution" class="grid">
<div class="grid-item">
Expand All @@ -205,79 +189,13 @@ <h3>Check your solution</h3>
<div id="credits" class="grid">
<div class="grid-item">
<h3>Credits</h3>
<p>The SQL Murder Mystery was created by <a href="https://twitter.com/joonparkmusic">Joon Park</a> and <a href="https://twitter.com/Cathy_MeiyingHe">Cathy He</a> while they were Knight Lab fellows. See the <a href="https://github.com/NUKnightLab/sql-mysteries">GitHub repository</a> for more information.</p>
<p>Adapted and produced for the web by <a href="https://twitter.com/joegermuska">Joe Germuska</a>.</p>
<p>This mystery was inspired by <a href="https://github.com/veltman/clmystery">a crime in the neighboring
Terminal City.</a></p>
<p>Web-based SQL is made possible by <a href="https://github.com/sql-js/sql.js/">SQL.js</a></p>
<p>SQL query custom web components created and released to the public domain by Zi Chong Kao, creator of <a href="https://selectstarsql.com/">Select Star SQL.</a></p>
<p>Detective illustration courtesy of <a href="https://www.vecteezy.com/">Vectors by Vecteezy</a></p>
<p>Original code for this project is released under the <a href="https://github.com/NUKnightLab/sql-mysteries/blob/master/LICENSE">MIT License</a></p>
<p>Original text and other content for this project is released under <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons CC BY-SA 4.0</a></p>
<p>The SQL Murder Mystery was created by...</p>
</div>
</div>
</div>

<footer class="footer-knightlab--dark">
<div class="container">
<div class='grid grid-center'>
<div class='column-2 column-4-phone column-4-tablet'>
<a href="http://knightlab.northwestern.edu" target="_blank">
<img src="https://cdn.knightlab.com/libs/orangeline/0.1.1/assets/logo-knightlab-stacked-dark-small.png" style="margin-left:auto;">
</a>
<ul class="list--social text-align-center">
<li><a class="link--no-style" href="http://www.twitter.com/knightlab" target="_blank" title="Knight Lab on Twitter"><span class="icon-twitter"></span></a></li>
<li><a class="link--no-style" href="https://www.facebook.com/knightlab" target="_blank" title="Knight Lab on Facebook"><span class="icon-facebook"></span></a></li>
<li><a class="link--no-style" href="https://github.com/NUKnightLab/" target="_blank" title="Knight Lab on GitHub"><span class="icon-github"></span></a></li>
</ul>
</div>
<div class='column-4 column-5-tablet column-6-phone footer-description'>
<p>
The <a title="Northwestern University" href="http://www.northwestern.edu/" target="_blank">Northwestern
University</a> Knight Lab is a team of technologists and journalists working at advancing news media innovation through exploration and experimentation.
</p>
<div class="grid-size-2 grid-size-2-phone">
<div class="grid-item">
<a title="Medill School of Journalism, Media, Integrated Marketing Communications" href="http://www.medill.northwestern.edu/" target="_blank">
<img src="https://cdn.knightlab.com/libs/orangeline/0.1.1/assets/logo-medill-dark.png">
</a>
</div>

<div class="grid-item">
<a title="McCormick School of Engineering" href="http://www.mccormick.northwestern.edu/" target="_blank">
<img src="https://cdn.knightlab.com/libs/orangeline/0.1.1/assets/logo-mccormick-dark.png">
</a>
</div>
</div>
</div>
</div>
<div class="grid grid-center">
<div class="grid-item">
<address itemscope="" itemtype="http://data-vocabulary.org/Organization">
<span style="display:none;" itemprop="name"
title="Knight Lab | Advancing news media innovation through exploration and experimentation."
class="address-name">Knight Lab</span>
<span itemprop="tel" class="tel">(847) 467-4971</span>
<span itemprop="address" itemscope="" itemtype="http://data-vocabulary.org/Address" class="address">
<span itemprop="street-address" class="street-address">1845 Sheridan Road</span>
<span class="room-num">Fisk #109 &amp; #111</span>
<div class="address-group">
<span itemprop="locality">Evanston,</span> <span itemprop="region">IL</span> <span
itemprop="postal-code">60208 </span>
<span style="display:none;" itemprop="geo" itemscope="" itemtype="http://www.data-vocabulary.org/Geo/"
class="geo">
Latitude: <span itemprop="latitude">42.056893</span><br>Longitude:
<span itemprop="longitude">-87.676735</span>
</span>
<a style="display:none;" href="http://knightlab.northwestern.edu" itemprop="url" class="url">Northwesten
University Knight Lab | Advancing media innovation through exploration and experimentation.</a>
</div>
</span>
</address>
<span class="copyright">© Copyright 2019 Northwestern University</span>
</div>
</div>
</div>
<!-- unchanged footer -->
</footer>

<script src="https://cdn.knightlab.com/libs/orangeline/0.1.1/js/orangeline.js"></script>
Expand All @@ -287,6 +205,37 @@ <h3>Credits</h3>
})
</script>

<!-- HINT FEATURE JS -->
<script>
const hints = [
"Start by checking the crime_scene_report for the murder details.",
"Look for witnesses who might have seen someone suspicious.",
"Interview statements often reveal contradictions—compare carefully.",
"Try joining tables like person, interview, and facebook_event_checkin."
];

let hintIndex = 0;

const box = document.getElementById("hint-box");

document.getElementById("showHint").onclick = () => {
if (hintIndex < hints.length) {
box.style.display = "block";
box.innerText = hints[hintIndex];
hintIndex++;
} else {
box.style.display = "block";
box.innerText = "No more hints!";
}
};

document.getElementById("resetHint").onclick = () => {
hintIndex = 0;
box.style.display = "none";
box.innerText = "";
};
</script>

</body>

</html>
Loading