Skip to content

Save user solutions and show them on page #231

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
RedWideWeb wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

Save user solutions and show them on page #231

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e7f8aa3
Save user solutions and show them on page
RedWideWeb Jun 27, 2022
17eb7bf
Update restaurant.js
RedWideWeb Jun 27, 2022
9f43723
Added HARDCORE mode. You have no selectors shown, hints or examples. …
RedWideWeb Jun 27, 2022
05bcebb
Navigation made easier. You can press arrow keys to navigate levels w…
RedWideWeb Jun 27, 2022
9ed9f0f
Focus on input when game/level is loaded
RedWideWeb Jun 27, 2022
d7ce00b
Save last input value
RedWideWeb Jun 27, 2022
0652715
Game win now properly triggers. If you have any unfinished levels the…
RedWideWeb Jun 27, 2022
0a39d2d
Game now properly registers [class] selector. Previously it wouldn't …
RedWideWeb Jun 27, 2022
8dbff3b
Reduce width of the window to look prettier (not ideal solution)
RedWideWeb Jun 27, 2022
17c2bb9
Made right-col scrollable in case Solutions list is too big
RedWideWeb Jun 27, 2022
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
38 changes: 36 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,23 +689,37 @@ orange {
line-height: 150%;
}

.display-help .examples-title {
.display-help .examples-title,
.display-help .solutions-title{
margin: 45px 0 10px 0;
padding: 0;
}

.display-help .hint,
.display-help solution,
.display-help .example {
color: #888;
font-size: 15px;
}

.display-help .example {
.display-help .example,
.display-help solution {
border-bottom: solid 1px rgba(255,255,255,.1);
padding: 10px 0 12px 0;
line-height: 170%;
}

.display-help .solutions:not(empty) {
padding: 10px 0 12px 0;
line-height: 170%;
overflow: hidden;
}

.display-help .solutions:empty {
padding: 0;
line-height: 170%;
}

.display-help .example:last-child {
border: none;
}
Expand All @@ -721,6 +735,18 @@ orange {
font-weight: normal;
}

.display-help solution {
display: inline-block;
color: #AAA;
background: rgba(255,255,255,.1);
border: none;
padding: 0 6px 0 6px;
margin: 2px 4px 2px 0;
font-size: 13px;
font-family: menlo,monospace;
font-weight: normal;
}

Comment on lines +738 to +749
Copy link
Author

@RedWideWeb RedWideWeb Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy paste from tag but with slighlty different margins to look good inline

.display-help .example strong:first-of-type {
margin-left: 0px;
}
Expand Down Expand Up @@ -1256,6 +1282,14 @@ tag:after {
content: ">";
}

solution {
cursor: pointer;
padding: 0 3px;
color: #AAA;
font-size: 13px;
font-weight: bold;
}

Comment on lines +1296 to +1303
Copy link
Author

@RedWideWeb RedWideWeb Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Show it's clickable via pointer cursor

.nametags {
z-index: 1;
width: 100%;
Expand Down
2 changes: 2 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,8 @@ <h3 class="selector-name"></h3>
<h2 class="title"></h2>
<h3 class="syntax"></h3>
<div class="hint"></div>
<h4 class="solutions-title">Solutions</h4>
<div class="solutions"></div>
Comment on lines +155 to +156
Copy link
Author

@RedWideWeb RedWideWeb Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add Sulotions title and container much like examples

<h4 class="examples-title">Examples</h4>
<div class="examples"></div>
</div>
Expand Down
50 changes: 46 additions & 4 deletions js/restaurant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,12 @@ function showHelp() {
var help = level.help || "";
var examples = level.examples ||[];
var selector = level.selector || "";
var solutions = []
if (progress.guessHistory[currentLevel]) {
if (progress.guessHistory[currentLevel].solutions) {
solutions = progress.guessHistory[currentLevel].solutions;
}
}
Comment on lines +385 to +390
Copy link
Author

@RedWideWeb RedWideWeb Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Get solutions from progress. If the progress exists it will populate its solutions. But additional check is needed because level progress might exist without solutions and in that case progress.guessHistory[currentLevel].solutions will return undefined which is obviously not iterable

var syntax = level.syntax || "";
var syntaxExample = level.syntaxExample || "";
var selectorName = level.selectorName || "";
Expand All @@ -332,8 +338,19 @@ function showHelp() {
$(".display-help .syntax-example").html(syntaxExample);
$(".display-help .selector-name").html(selectorName);
$(".display-help .title").html(helpTitle);
$(".display-help .examples").html("");
$(".display-help .solutions-title").hide(); // Hide the "Solutions" heading
$(".display-help .solutions").html("");
$(".display-help .examples-title").hide(); // Hide the "Examples" heading
$(".display-help .examples").html("");

for(var s of solutions){
var solution = $("<solution>" + s + "</solution>");
solution.click(function(event){
$("input").val(event.target.textContent).focus();
})
$(".display-help .solutions").append(solution);
$(".display-help .solutions-title").show(); // Show it if there are examples
}

for(var i = 0; i < examples.length; i++){
var example = $("<div class='example'>" + examples[i] + "</div>");
Expand Down Expand Up @@ -414,6 +431,22 @@ function fireRule(rule) {
}

if(win){
if (progress.guessHistory[currentLevel]) {
if (progress.guessHistory[currentLevel].solutions) {
if (!progress.guessHistory[currentLevel].solutions.includes(rule)) {
$(".display-help .solutions-title").show();
Copy link
Author

@RedWideWeb RedWideWeb Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually this line is redundant since if we have solutions the title should have been shown

let solution = $("<solution>" + rule + "</solution>");
$(".display-help .solutions").append(solution);
}
}
}
else {
console.log('shit')
$(".display-help .solutions-title").show();
let solution = $("<solution>" + rule + "</solution>");
$(".display-help .solutions").append(solution);
}

Comment on lines +434 to +549
Copy link
Author

@RedWideWeb RedWideWeb Jun 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there are solutions check the input rule if it matches existing solution. If it's new then add it to solutions container.
If there were no solutions previously you need to show solutions-title also

ruleSelected.removeClass("strobe");
ruleSelected.addClass("clean");
$("input").val("");
Expand Down Expand Up @@ -444,7 +477,7 @@ function fireRule(rule) {
// If answer is correct, let's track progress

if(win){
trackProgress(currentLevel-1, "correct");
trackProgress(currentLevel-1, "correct", rule);
} else {
trackProgress(currentLevel, "incorrect");
}
Expand All @@ -461,12 +494,13 @@ function updateProgressUI(levelNumber, completed){
}
}

function trackProgress(levelNumber, type){
function trackProgress(levelNumber, type, rule = null){
if(!progress.guessHistory[levelNumber]) {
progress.guessHistory[levelNumber] = {
correct : false,
incorrectCount : 0,
gaSent : false
solutions : [],
gaSent : false,
};
}

Expand All @@ -484,6 +518,14 @@ function trackProgress(levelNumber, type){
levelStats.gaSent = true;
sendEvent("guess", "correct", levelNumber + 1); // Send event
}
if(levelStats.solutions) {
if (!levelStats.solutions.includes(rule.toString())) {
levelStats.solutions.push(rule.toString());
}
}
else {
levelStats.solutions = [rule]
}
}

// Increments the completion percentage by 10%, and sends an event every time
Expand Down