Kids

Hey,
do you want to own your own detective agency page?
Click here and you can create it! (you might need to ask your parent for help)
If you already have a page click here

Parents

Hi,
 
This is a project to teach kids how to code by creating a constrained environment and fostering creativity. It is about you sitting with your kids and coding something small and exciting. It assumes you know how to code, but the help section has some topics for discussion. It is basically a playground with examples.
 
Each page can contain only 4096 characters, and has up to 4096 bytes of addressable storage.
You can make a new page for your kid at /register or if you already have a page go to /edit
 
NB: You need google account in order to make a page, and each google account can have only one page. This is done in order to be able to report abuse and make sure there is safe environment.
PS: if you have any suggestions, please send me an email detectiveninja@fastmail.com
Cost: The platform is free, because it costs me about 20$ per month to run it (15$ postgres and 5$ droplet), and while I can afford it, it will be free.
PPS: In case you get stuck in an infinite loop and your browser is crashing use /edit?show_preview=false to hide the preview iframe. It took my kid exactly 1 minute with the canvas example to exhaust ryzen 5950X. (I am so proud!)
How to contribute:
  1. fork github.com/jackdoe/detective
  2. open a pull request
  3. enjoy :D
  4. contributions, especially on more examples, are greatly appreciated!

Examples & Help

Jakie's Detective agency page /d/jakiegro
  1. First.

    Right click on this page and click on 'View Source'.
    Always View Source if you want to learn how things are done.

  2. Change small things.

    If you see someone else's page that you like (e.g. /d/jakiegro), right click on the page and select View Source, then you can copy the text in notepad and change it a little bit, learn from it and use it in your own page.

  3. Start small.

    Making a page can be a bit overwhelming, so just start small. for example:

    <html>
     <body>
       <h1>welcome!</h1>
       <p>this is my page</p>
     </body>
    </html>
    

  4. What to google for?

    If you want to write secret things its wise to use code, simply reversing the text already makes it difficult to read. For example: ?rof elgoog ot tahW see? But it can get quite complicated in order to make it harder to read, so search for 'morse code', 'rot13', 'pigpen'. Also ask your mom and dad for help, they must have used some strange code to talk to their friends at school.

  5. ASCII

    Computers do not understand text, so when you see text it is usually some number that is converted to a character, for example 65 is A, 66 is B, and so on.
    About 60 years ago some people agreed on a common way to map number to character, called THE ASCII STANDARD, super fancy name, for such a simple thing.
    I bet you came up with all kinds of number to letter code on your own! We would love to hear about it, so you can ask your parents to send us your code at detectiveninja@fastmail.com and we might publish it.


    Try to decode: 110 105 99 101 32 119 111 114 107 33
    32  SPC   64  @    96  `
    33  !     65  A    97  a
    34  "     66  B    98  b
    35  #     67  C    99  c
    36  $     68  D   100  d
    37  %     69  E   101  e
    38  &     70  F   102  f
    39  '     71  G   103  g
    40  (     72  H   104  h
    41  )     73  I   105  i
    42  *     74  J   106  j
    43  +     75  K   107  k
    44  ,     76  L   108  l
    45  -     77  M   109  m
    46  .     78  N   110  n
    47  /     79  O   111  o
    48  0     80  P   112  p
    49  1     81  Q   113  q
    50  2     82  R   114  r
    51  3     83  S   115  s
    52  4     84  T   116  t
    53  5     85  U   117  u
    54  6     86  V   118  v
    55  7     87  W   119  w
    56  8     88  X   120  x
    57  9     89  Y   121  y
    58  :     90  Z   122  z
    59  ;     91  [   123  {
    60  <     92  \   124  |
    61  =     93  ]   125  }
    62  >     94  ^   126  ~
    63  ?     95  _
    
  6. ROT1

    The simplest thing you can do is make A to be B, B to be C and so on until Z becomes A, as if the alphabet is on a circle and you turn it right one character.

    abcdefghijklmnopqrstuvwxyz
    bcdefghijklmnopqrstuvwxyza
            

    hello world becomes ifmmp xpsme
    This is already difficult to read!

  7. ROT13

    You can do the same, but rotating it 13 times, so that A becomes N, B becomes O and Z becomes M

    abcdefghijklmnopqrstuvwxyz
    nopqrstuvwxyzabcdefghijklm
            

    Why did the chicken cross the road? becomes Jul qvq gur puvpxra pebff gur ebnq?. See? Amazing how different the result is.

  8. A1Z26

    Another way to encode letters to numbers, is to simply make A to be 1 and Z to be 26. Can you imagine how A65Z90 looks like?

    a 1
    b 2
    c 3
    d 4
    e 5
    f 6
    g 7
    h 8
    i 9
    j 10
    k 11
    l 12
    m 13
    n 14
    o 15
    p 16
    q 17
    r 18
    s 19
    t 20
    u 21
    v 22
    w 23
    x 24
    y 25
    z 26
  9. Pigpen

    This is super cool cipher!


    Try to decode this:
    it looks just amazing!
  10. Substitution cipher

    All those are substitution ciphers, there is some sort of a map, or series of steps you take to transform the words into encrypted code, and then the inverse operation to go back from code into words.

  11. Favorite book.

    let's say you and your friend have a favorite book, Alice in Wonderland

    So we can agree on code page number, row number, word number. For example: 3 1 3 3 14 8 is 'curiosity time' (page 3, row 1, word 3, page 3, row 14, word 8). Both you and your friend have to know the book you are going to use in advance. You can see this is quite more powerful than the previous substitution methods. Because now there is a piece of information that only you two know, and even if someone gets the code, there is little he can do to decrypt it. There are grownup methods to decipher this kind of code, but for kids it is quite difficult even if they get the code in plain sight.

  12. HTML

    The app you are using right now to see this website is called a web browser, I don't know if kids still call it like that, but adults do. It works in a very similar way to the ASCII code and the other substitution ciphers.

    For example, try this on your page:

    <b>this is bold</b>
            

    it will show:

    this is bold

    First the browser app downloads the web page, which is just a normal text file (it is what you see when you click on View Source), then it has to process it, in the same way you read pigpen code or ascii code, you look symbol by symbol and try to make sense out of it by making it into letters you understand.

    It looks for special characters '<' and then '>', like with the favorite book code, when you agree with your friend that the first digit will be the page, when it sees '<' it knows what ever is between '<' and '>' is important word. Then it has kind of a table so it know what to do with different words, when it sees 'b' it knows that whatever is inside is gonna get bold. There are many words like that you should try for yourself 'b' 'i' 'u' 'h1', and many more.

    let try some more things:
    <ul>
        <li>
          first <b>item</b>
        </li>
        <li>
          second <i>item</i>
        </li>
        <li><h2>third</h2>
      </li>
    </ul>

    It will look like:

    • first item
    • second item
    • third

    'ul' (which means unordered list) and 'li' means 'list item', so it makes it look like a list. 'h2' is to to make it big and on its own line, like the title of a book chapter.

    Making lines:
    first
    line<br>
    second line<br>
    <hr>
    third line<br>
    
    first line
    second line

    third line

    'br' means line break, when the browser sees it know it has to show whatever comes next on another line, 'hr' means horizontal rule,just like when you take your ruler and draw a line from left to right in the text book. You see, even though you write things in separate lines (like the word first and line are clearly on separate lines), the browser will not know what to do until you tell it to 'br'. Maybe in school you had a project you have to use PowerPoint to make a presentation? With the special words ul, li, br, hr, h2 and b you can make your own presentation in HTML!

  13. Make your own language

    'What I can not create, I do not understand' the poet said, so let's make our own language that we can use to combine LEGO bricks. How many brick kinds you know? Most common ones are small(2 bumps) square(4 bumps) and rectangle(8 bumps), they can be thick or thin, and there are also the weird ones with 6 bumps. And of course the one with only 1 bump and actually.. long ones with 1 line of 6 bumps or 8 or 12 bumps.

    We can just give them funny names, the 2x2 square will be 'gobby', 2x6 will be 'moby'... let's just make a table

    (interested to know how to make tables with HTML? just view source!)
    fat/thin bumps name
    fat 2x2 gobby
    thin 2x2 squash
    thin 1x8 pancake
    fat 2x2 moby
    fat 1x1 dot
    fat 1x2 pinky
    thin 1x4 dodo
    thin 2x4 pika
    fat 2x4 bobo
    fat 2x8 mega-worm

    .. this list is quite long and we are not even done yet, I will let you come up with your own names for the pieces that are missing. So now we need to define how to join pieces together, for that we need a way to address each bump/hole on each piece.


    We should agree on how we put the bricks on the paper, let's always put the long side down, like on the picture. Now we can address each stud, so 2,2 is the stud I am pointing at. Its time to make a plane!

    pancake(4,1)->mega-worm(3,1)
    pancake(4,2)->mega-worm(2,1)
    pancake(5,1)->mega-worm(3,2)
    pancake(5,2)->mega-worm(2,2)
    dodo(2,2)->mega-worm(7,1)
    dodo(3,2)->mega-worm(7,2)
    dodo(2,1)->mega-worm(8,1)
    dodo(3,1)->mega-worm(8,2)

    let's use -> to say 'goes to' and () we will use just to group the numbers, even though it looks quite frightening it we have to compromise a bit, to make it easy for us to write so its short and concise. It goes from left to right, so you take first piece, and then attach what follows to the specific stud, so stud 3,1 on mega-worm is on top of stud 4,1 on pancake.

    And we have our plane! (well it requires a bit of imagination to call this a plane, but I am sure you can handle that part)



    So this is our language, we have a piece name, then describe which stud goes on below which stud, and that's it! we can build everything. Oh, but we don't have a name yet, let's call it... MEGALEGOLANG :D

    I will leave it up to you to write down the steps to build this:


    Haha no, I am joking! The instructions for this set described by using MEGALEGOLANG will be longer than the tallest building in the world! This language is quite limited, and actually quite inefficient, but the point I am trying to make is that, the words we made up have some meaning that we give to them, like 65 is 'A' in ASCII, but only because we know we are reading ASCII we can translate it. When you 'View Source' on any page, you will see a lot of words, some of which you will see for the first time, but try to remember, almost none of them do complicated things, you just have to know where to find information about them, usually searching in google for 'HTML word_you_are_looking_for' will give you what you need, try HTML h2, you will see lots of results, usually the results on developer.mozilla.org are great.

  14. SUPERMEGALEGOLANG

    Ok, its obvious that using MEGALEGOLANG for serious projects will be a daunting task, I think it's time to make a better version that is easier to describe things in, MEGALEGOLANG makes it very difficult to describe the most important property of lego parts, connecting them together, because we have to describe each point, what if we are connecting tiles 12x12? we have to write a whole page of instructions just to connect two pieces.

    What is the minimum amount of information we need in order to connect two things?

    First we need to know the kind of pieces we are connecting. We can stick to our current method of using a table that uniquely identifies each piece, which is not ideal, but will do the job for now.

    Second, we need to know at least one bump and then their orientation. That means we have to know where is it pointing at, so to do that we will draw 2 lines that have a right angle between them, if you don't know what a right angle is, or what an angle do not worry. It is just a part of a circle. I will give names to the lines so it is easier to talk about them, the line going up we will call Y, and line going right we will call X, as I said previously, don't be scared of names of things.


    See the amount of circle between the X line and the lego piece is ZERO! it is right on the line, so we call this orientation 0

    This one is exactly 1/4th of the circle, and we have decided to have 360 pieces in a circle, since ancient times, 360/4 is 90, so this is orientation is 90

    this one is half of 90, so 45

    We should keep the orientation and the stud numbering separate, so 2,2 or 1,8 will always assume the piece is oriented in position orientation 0. Now if we say bump 3,2 orientated 0 on mega-worm connects to 1,1 on pika oriented 90, it will look like this:

    Now, it is time to improve our language,let's try:

    piece name(orientation,x,y)
    
    our plane looks like this:
    pancake(0,1,4)->mega-worm(90,1,3)
    dodo(0,1,2)->mega-worm(90,8,1)

    Wow! so much simpler! .. Well we had to introduce orientation and angles and stuff, but we have to write way less, in the same time, maybe the previous language is actually simpler, because we only have to know about bumps and that's it.

    You are learning to do computer stuff when everything is 'simple', and yet it is not really, it just has a lot of meaning hidden inside few words, so just keep digging, whenever you stumble on something that doesn't make sense, first view source, then google, then try to use it, and then try to make it yourself, because when you can make something yourself, that is when you truly understand it.

    Sometimes we want to connect complicated pieces together, so for example, we have our plane, and we want to connect it to another plane

    PLANE:
      pancake(0,1,4)->mega-worm(90,1,3)
      dodo(0,1,2)->mega-worm(90,8,1)
    
    PLANE(0,1,1)->PLANE(0,2,2)
    
    PLANE() just like pancake() takes orientation, x, y, so after the plane is built, and in your hand, you can connect it with the other PLANE() on the specific bumps, you will also see that our language breaks down at this point, because we would need another parameter, in order to uniquely identify a bump we have how much on the left, top and how tall it is.

    In order to make it work we would need something like PLANE(0,1,1,0)->PLANE(0,2,2,0), where the 4th element will say which piece from the bottom we are addressing. for this I think its easier to just count pieces, like 1,2,3 from the bottom.

    So our program be comes:

    PLANE:
      pancake(0,1,4)->mega-worm(90,1,3)
      dodo(0,1,2)->mega-worm(90,8,1)
    
    PLANE(0,1,1,0)->PLANE(0,2,2,1)
          

    I feel we can do better than this mega-worm, pancake business, because we can already define 1x5 or 2x2, 2x8 bricks, so maybe its better to just pass them as parameters? We will also introduce a new label START, so whatever is in it we do first.

    PLANE:
        CONNECT(
            1x8,  0, 1, 4,
            2x8, 90, 1, 3 
        )
    
        CONNECT(
            2x4,  0, 1, 2, 
            2x8, 90, 8, 1
        )
    
    START:
        CONNECT(
            PLANE(), 0, 1, 1, 0,
            PLANE(), 0, 2, 2, 1
        )
    
    We can now connect whatever is the result of PLANE(), to something else.
    PLANE:
        CONNECT(
            1x8,  0, 1, 4,
            2x8, 90, 1, 3 
        )
    
        CONNECT(
            2x4,  0, 1, 2,
            2x8, 90, 8, 1
        )
    MEGAPLANE:
        CONNECT(
            PLANE(), 0, 1, 1, 0,
            PLANE(), 0, 2, 2, 1
        )
    
    START:
        CONNECT(
            MEGAPLANE(), 0, 8, 1, 1,
            2x8,        90, 8, 1, 0
        )
        

    This is very powerful! you see we can keep combining those objects into making bigger and bigger things.

  15. CODE

    Its time to write some real code, try this on your page:

    <script>
        var password = prompt('what is the password?')
        if (password == 'everest') {
            alert('WELCOME!')
        } else {
            alert('GO AWAYY!')
        }
    </script>
            

    First try it and then continue to read.

    .
    .
    .
    .
    .
    .
    .
    .

    Did you try it?

    Ok, lets go word by word. <script> is a special HTML word, like 'ul' or 'h2' that tells the browser that whatever is inside is code, its not supposed to show this text as text or as HTML, but run this little program, and let it do what it does. Kind of like our SUPERMEGALEGOLANG, its just a set of instructions

    prompt, is like a mini program, will tell the browser to ask you a question, it will return whatever you wrote in it. Kind of like the instructions to make a PLANE in SUPERMEGALEGOLANG, with one difference that in SUPERMEGALEGOLANG you are holding the result in your hand, so its obvious where it is, in case of prompt() it will return the result to wherever it was called.

    var password is a variable, its just a place we can put whatever value we want, we can say 'var password = 123', its the '=' that puts whatever is on the right side of it, into whatever variable is on the left. so var password = prompt('what time is it'), puts the result of the prompt mini program into the variable password.

    Next comes 'if(something) { do A } else { do B }' the squiggly brackets just group a bunch of instructions together in a 'block' of code, so what this does is if something is true, then it will 'do A', otherwise it will 'do B'

    alert will show a popup with whatever alert you give it. Wanna try something funny?

    <script>
        alert(prompt('guess a number between 1 and 1 million and I will tell you what it is:'))
    </script>

    Quick note about the quotation marks ', the same way the browser reads <> to make sense, when it is reading a script, it actually does not know what is a special word, and what is some text you wrote. so if I say 'if (password == everest)' it will be confused, what is everest, it has never seen it in the program before, but if I say 'everest' it knows has to compare the value of variable password with the text 'everest'.

Privacy

  • We will not sell your data to anyone.
  • We do not use analytics or third party cookies or whatever for our non user generated pages, nor modify the code of the user generated pages to embed anything there.
  • We do not know what tracking do the user's pages have, they might use some third party imports or images.
  • We use google auth for login in order to create or edit a detective agency page, so you should consult google's privacy policy and terms of service for that.
  • We will not send you emails unless you send us one first.
  • All requests to the platform are logged in the nginx log, and the email is stored in the database with the http request that last modified the page, so we can block it if someone reports abuse.

Terms of Service

  • you must be above 18 years old to use this platform
  • we are not responsible for any content you read or write on detective.ninja
  • report any issues or suggestions to detectiveninja@fastmail.com
  • Offensive content will be removed, and the account blocked. Please report any issues to detectiveninja@fastmail.com.
  • The content and the platform can be deleted at any point.

Licenses

Pigpen Font and pigpen-demo.png:
Copyright (c) 2015, Jérémie Dupuis jeremie.dupuis1@hotmail.com, with Reserved Font Name Pigpen Cipher. This Font Software is licensed under the SIL Open Font License, Version 1.1 is available with a FAQ at: http://scripts.sil.org/OFL

Icons made by Freepik from www.flaticon.com
Adventures in Wonderland and ROT13 pictures are from Wikimedia