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.

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

Hacking Instructor #440

Open
bkimminich opened this Issue Jan 26, 2018 · 2 comments

Comments

1 participant
@bkimminich
Owner

bkimminich commented Jan 26, 2018

  1. User selects a challenge from the Score Board
  2. The Hacking Instructor guides the user through the challenge step-by-step...
  3. ...until the challenge is solved
  • Gives some soft hints first and allows to ask for more help up to full solution walkthrough
  • The "wasp" from the ebook logo could act as the instructor avatar/agent
@bkimminich

This comment has been minimized.

Owner

bkimminich commented Jan 26, 2018

Storyboard

Select Challenge

image

Helpful Wasp shows up and gives a hint

image

Helpful Wasp observes regular behavior

image

Wasp goes to screen edge waiting to be called for more help

image

Helpful Wasp gives hint what to do next

image

Another smart remark

image

Wasp goes back to screen edge

image

...

@bkimminich

This comment has been minimized.

Owner

bkimminich commented Jan 26, 2018

File Format for Hacking Instructions

challenges:
  - name: XSS Tier 1
    hints:
      - text: Well, I prefer stripes, but let‘s do some cross site scripting! First, let‘s search for „wasp“ in the Search box at the top of the page!
        page: score-board
        fixture:
          - type: id
          - value: XSS Tier 1
        position: right
      - text: Good! You can see, the search value you typed also appears on top of the result list so you remember what it was! How convenient…
        page: search
        fixture:
          - type: ng-bind-html
          - value: searchQuery
        position: right
        hideAfterHint: true
      - text: Now, search for this instead and observe what happens… „<h1>wasp“
        page: search
        fixture:
          - type: ng-model
          - value: searchQuery
        position: bottom
      - text: Whoops, what happened here? You might want to inspect the text with your Browser DevTools to find out! Click me when you need more help!
        page: search
        fixture:
          - type: ng-bind-html
          - value: searchQuery
        position: right
        hideAfterHint: true
      ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment