Skip to content

Commit 01252e3

Browse files
flukeoutflukeout
committed
Beginning work to track progress on questions
1 parent 607981b commit 01252e3

File tree

6 files changed

+58
-16
lines changed

6 files changed

+58
-16
lines changed

‎NOTES.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
##Where I left off
2+
3+
* Adding a 'level-complete' indicator to the right-hand-side menu
4+
15
## Random Notes
26

37
For example, I'd like to keep track of progress, can I update it every time there is an increase?

style.css renamed to css/style.css

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -829,9 +829,9 @@ plate orange:nth-last-child(4)
829829
.what-is-this {
830830
text-align: center;
831831
margin-top: 35px;
832-
padding: 20px;
833-
width: 500px;
834-
color: #666;
832+
padding: 20px 0;
833+
width: 725px;
834+
color: rgba(255,255,255,.3);
835835
font-size: 15px;
836836
margin: 0 auto;
837837
font-weight: 400;
@@ -930,6 +930,29 @@ plate orange:nth-last-child(4)
930930
color: #777;
931931
}
932932

933+
.level-menu .level-syntax {
934+
position: relative;
935+
display: inline-block;
936+
}
937+
938+
.level-menu a.completed .checkmark {
939+
opacity: .5;
940+
}
941+
942+
.level-menu a .checkmark {
943+
position: relative;
944+
display: inline-block;
945+
width: 7px;
946+
height: 13px;
947+
opacity: .2;
948+
949+
border: solid 2px white;
950+
border-width: 0 2px 2px 0;
951+
left: 10px;
952+
top: -1px;
953+
transform: rotate(37deg);
954+
}
955+
933956
.level-menu a:hover {
934957
color: #999;
935958
}

‎index.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html>
33
<head>
44
<title>CSS Diner - Where we feast on CSS Selectors!</title>
5-
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
6-
<script src="levels.js" type="text/javascript" charset="utf-8"></script>
7-
<script src="restaurant.js" type="text/javascript" charset="utf-8"></script>
5+
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
6+
<script src="js/levels.js" type="text/javascript" charset="utf-8"></script>
7+
<script src="js/restaurant.js" type="text/javascript" charset="utf-8"></script>
88
<link rel="icon" type="image/png" href="favicon.png">
99
<link href='http://fonts.googleapis.com/css?family=Exo+2:200,400,600,400italic,600italic' rel='stylesheet' type='text/css'>
10-
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
10+
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
1111
</head>
1212
<body>
1313

@@ -110,10 +110,7 @@ <h2>What is this?</h2>
110110
<p>It's a little game to help you learn CSS selectors. Type in the correct selector to complete each level. Get help on the right.</p>
111111
<p>It's a work in progress, so please give me feedback!</p>
112112
<p>
113-
Made by <a href="http://www.twitter.com/flukeout">@flukeout</a> with special thanks to...
114-
</p>
115-
<p>
116-
<a href="https://twitter.com/k88hudson">@k88hudson</a>, <a href="http://www.twitter.com/antlam7">@antlam7</a> and <a href="https://twitter.com/smashman2004">@smashman2004</a>.
113+
Made by <a href="http://www.twitter.com/flukeout">@flukeout</a> with special thanks to <a href="https://twitter.com/k88hudson">@k88hudson</a>, <a href="http://www.twitter.com/antlam7">@antlam7</a> and <a href="https://twitter.com/smashman2004">@smashman2004</a>.
117114
</p>
118115
<p>
119116
Please submit issues and PRs at <a href="https://github.com/flukeout/restaurant">this Github repo</a>.

jquery.js renamed to js/jquery.js

File renamed without changes.

levels.js renamed to js/levels.js

File renamed without changes.

restaurant.js renamed to js/restaurant.js

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ var blankProgress = {
1818

1919
var progress = JSON.parse(localStorage.getItem("progress")) || blankProgress;
2020

21+
console.log(progress);
22+
2123
$(document).ready(function(){
2224

2325
$(".note-toggle").on("click", function(){
@@ -93,20 +95,40 @@ $(document).ready(function(){
9395

9496
});
9597

98+
function checkCompleted(levelNumber){
99+
if(progress.guessHistory[levelNumber]){
100+
if(progress.guessHistory[levelNumber].correct){
101+
return true;
102+
} else {
103+
return false;
104+
}
105+
} else {
106+
return false;
107+
}
108+
}
109+
96110
function buildLevelmenu(){
97111
for(var i = 0; i < levels.length; i++){
98112
var level = levels[i];
99113
var item = document.createElement("a");
100-
$(item).html("<span class='level-number'>" + (i+1) + "</span> " + level.syntax);
114+
$(item).html("<span class='level-number'>" + (i+1) + "</span>" + level.syntax + "<span class='checkmark'></span>");
101115
$(".level-menu .levels").append(item);
116+
117+
if(checkCompleted(i)){
118+
$(item).addClass("completed");
119+
}
120+
102121
$(item).on("click",function(){
103122
finished = false;
104123
currentLevel = $(this).index();
105124
loadLevel();
125+
$(".level-menu").toggleClass("open");
106126
});
107127
}
108128
}
109129

130+
131+
110132
function hideTooltip(){
111133
$(".enhance").removeClass("enhance");
112134
$("[data-hovered]").removeAttr("data-hovered");
@@ -303,10 +325,6 @@ function fireRule(rule) {
303325
if(win){
304326
trackProgress(currentLevel-1, "correct");
305327
}
306-
// else if (win == false && rule.length > 0) {
307-
// trackProgress(currentLevel, "incorrect");
308-
// }
309-
310328
}
311329

312330

0 commit comments

Comments
 (0)