yanamal / html-hax Goto Github PK
View Code? Open in Web Editor NEWAn AppEngine app that teaches you web development
License: MIT License
An AppEngine app that teaches you web development
License: MIT License
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:
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:
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:
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:
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:
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:
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.