yanamal / html-hax Goto Github PK

I had two family members play the game. The first did not finish and went through about two rounds. The second then picked up, but we could not "reset" the game to the beginning without finishing the rest of the rounds. Perhaps a Start Over button could be created.

a puzzle which requires going from a JS/JSON object to dot notation (to retrieve a certain member)

Create an HTML template for the user profile page.

The user profile page should have template spaces for:

• user name
• how many puzzles completed
• current puzzle
• how many puzzles there are in all
• list of completed puzzles, with links to each one

Make an HTML form (in a new HTML file) that recreates one of the questions from the midterm or not-a-quizes.

Make a puzzle that isn't a randomized password; but something the user has to figure out from a riddle or question (preferably html-related)

Ask a quiz question about the same CSS code as in this file: https://github.com/yanamal/html-hax/blob/master/static/backgroundcolor.css
The question should ask what the CSS changes (the correct answer is that it changes the background color of the element; make up some plausible wrong answers)

you can look at b38570a to see an example of how to structure a quiz question.

The last puzzle had no good clue.

Make a puzzle that displays the {{ passphrase }} right on the screen, but uses the same color for the password and the background (and as many other things as possible on the page all use the same color, too). That way, the password is invisible, and the player has to either read the HTML, or select the text to figure it out.

bonus: make it unselectable (https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable)

Make a quiz question similar to questions 1 & 2 in https://goo.gl/forms/ftolJowzLorZmNY93
It should ask which is a correct HTML element, and present several options.
The correct option will have an HTML element that includes an opening and closing tag. Incorrect options might have parts or all of the tag missing.

you can look at b38570a to see an example of how to structure a quiz question.

The screen shot puzzle is wrong because their are no fancy brackets for the password, which can be confusing and misleading to others.

Make an HTML page that provide hints on how to solve a specific puzzle

Make an HTML page for a puzzle which will be shown after the puzzle, and which explains how that puzzle worked / what HTML concepts were used.

In the first puzzle (templates/autopass/hello-world.html) we should have instructions for how to open the "Inspect" view, and how to find the relevant bit of HTML in it.

The instructions should include:

• a screenshot of the menu choice that opens up the Elements view ("Inspect" or "Developer Tools")
• a screenshot of the Elements view itself, using a very similar HTML page to the first puzzle (but with an obviously wrong password, or different comment altogether)
  • The password/comment should be underlined or circled, so the user knows where to look in their own Elements view

The user didn't understand what was going on at first. He said he didn't know he was even doing a puzzle at first. He thought he was literally just putting in a password to get to the actual game. Maybe we should had a page where we explain whats actually going on and explain what the player is going to do.

To solve the puzzle, something must happen on page load.
Good reason for introducing userscripts.
(automation of repetitive task is another good reason)

For the disabled.html puzzle, there could be an incorrect value for the password, or indicate that a value is needed to be able to submit it. Because there was another html line with a value, it was confusing to figure out.

Suppose there's a fake "web store" which lists items and prices. When you add to cart (or check out) it foolishly trusts the prices listed in the HTML. Player's task is to make everything cost 0 and then "check out".

Also Make a contrasting/more complex store which ignores the JS (or maybe compares and detects issues?)

Quiz questions and "hacking" puzzles look too similar. This is bad because the user is supposed to do totally different things in them.

Create a new css file inside static, and make it distinct from the hacking puzzles CSS. Use the appropriate CSS inside at least one puzzle of each type (to be able to test it).

The hacking puzzles use the CSS static/puzzlestyle.css

You can start out by duplicating it, and then changing one or both CSS files so they are distinct.

Make a puzzle that's a lot like notext, except:

• change the input back to type="text", so it looks like a text box
• disable it (see https://www.w3schools.com/tags/att_input_disabled.asp for how to do it)

Make an HTML+JS puzzle, where the HTML imports a very simple javaScript file: in the JavaScript, the only thing that happens is a variable is created, and is set to {{ passphrase }}.
Also in the HTML, there's a clue about the variable name.
Then, the player would have to use the console to print out the variable value, and then use it to solve the puzzle.

I tested the puzzle quiz on my god brother. Who is the age of 15 years old. His response was that the puzzle were a little bit confusing, even with his prior knowledge with computers. He said that we should just make them simpler.

I feel we could add more color to the puzzles. Give it a background color or colorful text. We could even add a score every time we get an answer right.

Through user testing it has been found that this puzzles has 2 issues. The user did not know where to look to solve the issue. If the text is changed in the field to the correct password without re enabling the field the submission is counted as incorrect.

The user was doing fine with first few puzzles as I was guiding her. The puzzles that include linked files like js and css, the user did not quite understand how to change the files to solve the puzzle. I would recommend having more clues/directions to make it easy and playable for people who do not have experience with html.

the Flask library breaks the App Engine environment on Windows, because (only on Windows) it expects a library (msvcrt) that is excluded from the App Engine environment: pallets/click#594

The workaround is to pretend that we are not, in fact, on a windows computer:
https://stackoverflow.com/questions/25915164/django-1-7-on-app-engine-importerror-no-module-named-msvcrt
gae-init/gae-init#527

That library is only used for command-line flask tools, which we aren't using anyway (and I think the workaround doesn't actually cause any loss in functionality). It definitely doesn't affect the production build, since that's not on windows.

Change README.md to actually describe what this app does, for developers.

You can use Markdown (look it up!)

Small issue where the password will be shown in the .js file but not when password is typed in the console.

We should have a Welcome (HTML) page that explains things like:

• How this game works (in general)
• What it's for (what the users will learn)
• why you need to log in (to keep track of your progress)

This page can live in templates/index.html

Idea for a puzzle or longer tutorial: make a page that acts like a paywall pop-up or a "but wait!" pop-up.
User has to manipulate the CSS/JS to disable the pop-up, see the content.

Have the ability for users to change the UI of the game by adding their own JS bits to make things more convenient, like those chrome extensions that change the site's interface and make it more useful/customized.

(somehow have a puzzle about doing this?)

The user had problems changing the format of the button. She felt like its hard for people to do this puzzle if they are not familiar with HTML formats.

Had trouble figuring out where to find the problem, I suggest a more direct way to get the user to understand the main issue.

Make a quiz question about HTML attributes, sort of similar to question 3 here: https://goo.gl/forms/Eug1LgE3apSRpl8D3 but make it about the type attribute in an <input> element

you can look at b38570a to see an example of how to structure a quiz question.

Create an HTML template, which we can use for all puzzles, so the user can navigate the rest of the site.
it should:

• be a small menu bar near the top of the page

• have a link to the user profile (just link to /dummyprofile for now)

• have a template space (as in, a template variable like {{ something }}) for the name of the puzzle

• have a template block for the actual puzzle

• Optionally:

  • have a link that restarts the puzzle (just reload the current page, really)
  • (maybe) have template spaces how many puzzles the user has completed, out of how many (e.g. "Puzzle 5/10")
  • (maybe) have a (templated) link to the previous puzzle

Like notext, but change the input type back to text, and get rid of the submit button altogether.

Make a quiz question that tests the user's understanding of what gets put in the URL when you submit a form.
It should ask what the URL will look like when you submit a form which has:
<input type="text" name="pass" value="banana"/>
The correct answer will be that the URL includes:
pass=banana
Make up some incorrect but plausible answers.

you can look at b38570a to see an example of how to structure a quiz question.

As I was watching my friend play the game i noticed the questions/hacks are unorganized so I think we should provide a hint button for each problem. The hint button will allow the users have a better understanding on what exactly they should be doing.

Write a backend handler for the user profile page.
It should get, from the database and various other places:

• user name
• list of completed puzzles
• current puzzle
• how many puzzles completed
• how many total puzzles there are

And then it should render the appropriate template using this info

Make a clicker game based on the "history of the web" lecture: at first, the player has to click each time to send a paper over to a colleague; then, as the web develops, automation comes in, etc.

Make a "quiz question" that's very similar to the puzzle in VicsAutopass (the JS hides the correct answer in a variable), BUT

1. is a static HTML/JS page, with the answer always being the same
2. it walks the user through exactly the steps they need to take to get to the console, and type in the right variable name.

you can look at b38570a to see an example of how to structure a quiz question.

Have a link in the javascript, in a comment, to some external resource which has the password. (not sure if this is conceptually different from just having the password in the comment, but might be more fun?..)

Clearer instructions on "two wrongs don't make a right" puzzle.

Add more passphrases to https://github.com/yanamal/html-hax/blob/master/data/passphrases.json

Use the pull request procedures we learned about!
Get extra credit!

Emphasize the difference between client-side and server-side validation: the client may not let you do something (e.g. add shoe to favorites if it's out of stock... I mean enter the password if you're not listed "approved"), but if the check is not on the server side, then you can still ask the server to give you the data, even if the "approval" data comes from the server)

use css to set important parts of the puzzle to display: none, so they don't show up! the player then has to find and disable that part of the CSS

Make a quiz question very similar to Question 1 here: https://goo.gl/forms/Eug1LgE3apSRpl8D3
But about a function that's more similar to the puzzle in new-hello-world.html

you can look at b38570a to see an example of how to structure a quiz question.

make a puzzle like hello-form, but hide the comment in a different place (add more HTML, and hide it in the middle of it somewhere)

Make an HTML+ JS puzzle which has JavaScript button, but the button isn't "hooked up" to the JavaScript function, or there is a typo. The user will then have to edit the HTML to make the button work.

Make a quiz question that's very similar to question 3 in https://goo.gl/forms/ftolJowzLorZmNY93 except make it about the <form> element, instead of the <p> element.

you can look at b38570a to see an example of how to structure a quiz question.

I have to figure out how the project management works on github.