Recipe Generator Tips

Just give it a shot!

You're probably not going to break anything. This generator was designed to handle most things you might have to do to convert the text to valid HTML, so all you need to think about is creating your recipe.

Adding Steps

The only rule here is that you should label each step using a number, period, then space. 

1. This step will work.
2.  This step will also work.
3.                          


Even this will be formatted properly. 
3.  Don't worry about messing up your numbering, it will still be displayed correctly!

Adding Code into Your Steps

Many recipes benefit from having snippets of code within the steps. This is the one area where there are a few rules that you should follow:

  1. Put all code snippets inide of <pre> tags.
  2. Since this block of text is therefore preformatted, any indentation you use will be represented in the recipe.
  3. Left justify the first line of your code block (again, it will display exactly as you have entered it).
3.  Here is a step in my recipe.  It needs a little bit of code to make sense.
<pre>
import ddf.minim.*;
boolean soundPlayed = false;
void playSound() {
    if (!soundPlayed) {
        Minim minim = new Minim(this);
        AudioSample sound = minim.loadSample("ding2.wav");
        sound.trigger();
        soundPlayed = true;
    }
}
</pre>
4.  And on to the next step!

Adding an Image

Since JavaScript doesn't easily allow you to download entire folders, there is currently not a way to upload a photo into the recipe generator. The easiest way to add a photo for those with access to the repositories is to upload the image in the correct folder on the respository, then paste the URL into the appropriate field on the recipe generator. For example, the googlyEyes recipe is in level 0 module 4, and the associated image can be found here: 

https://github.com/LEAGUE-Level0/LEAGUE-Level0.github.io
    /modules
        /Mod4Recipes
            /images
                googlyEyes.png

What About Escaping Certain Characters?

You might wonder if you need to escape <, >, or & in your recipe. Don't worry, the recipe generator will do that for you! However, if you try to use any HTML within the body of the recipe that isn't a <pre> or anchor (i.e. link) tag the recipe generator will strip out the angle brackets and it will be dispalyed as text.

Creating Good Recipes

Here are a few tips to help improve your recipes:

  1. Use your imagination! Try to come up with a fun backstory for your program. For example, "Write a bunch of if statements to check user input" is a lot less fun than "write a program that allows the user to enter a name and tell them that person's superpower".
  2. Students will stop reading a step at their earliest possible convenience. Try and keep recipe steps to one sentence if possible.
  3. For lower level recipes, try not to leave out any steps no matter how obvious they seem. For example, for Processing recipes you likely want the first step to mention creating a new sketch at adding setup() and draw() methods.
  4. Adding a list of steps inside of a step is strongly discouraged (see point two), but if you must do so then please use the code below so that it is properly formatted: 
    1.  Here is a step that requires clarification:
<ol class="insetRecipeStepsOL">
    <li>Do this first</li>
    <li>Then do this</li>
    <li>Finally do this</li>
</ol>