Welcome to APBML - AP Block Markup Language

the DIY, roll-your-own ASCII-2-AP block code tool. | © Baker Franke 2017

Input: apml
[block], |val|, (cond),
2-spaces=tab, <- = arrow
Input: AP Pseudocode
2-spaces=tab, <- = arrow,
{} should be on own line
AP Pseudocode APML
Rendered Blocks
font-size: 12
(230 x 313)
HTML to Copy:

(this HTML creates the blocks at left using this: blockStyles.css stylesheet)
Saved Code
(Simple concatented text in reverse-chrno order, saved to local storage.)


What this is:

A hacked together janky string parser that lets you dictate how and where AP CSP-style blocks are drawn by converting from AP CSP Pseudocode, or from using a markup language that I made up and am calling APML - AP Markup Language.

What this is NOT:

This is NOT an AP pseudocode complier, validator, coding environment, or any other thing that might lead you to believe this is doing something beyond drawing pretty picutres on the screen.

It will NOT ensure you write valid AP-style pseudocode or blocks. Basically, it will let you write incorrect code. Consider this as freedom from constraints.

What problem does it solve?

Writing the text-based form of AP pseduocode is easy. Drawing the blocks is anoying so this helps you automate it to some degree. With this tool you can quickly construct AP-style block code.

The main thing you might want is to screen-cap an image of the code for use on handouts, quizzes, etc. You can also easily copy out the HTML - the same code that is rendered on the screen - for use on your own site. You'll need the blockStyles.css file that accompanies it. Yes, I made up my own arbitrary tags.

Mileage may vary on toggling back and forth between AP pseudocode and APML

The code that process the AP pseudocode into APML and vice versa is not robust (and under the hood extremely finiky). It does a pretty good job in most circumstances but you might notice little artifacts get introduced along the way. If this happens, I told you so. You'll have to clean up your own mess.

If AP pseudocode doesn't convert nicely, just switch to APML and do the formatting by hand.

How does APML work?

First, APML is completely made up...by me...for purposes of this app. So you know, good luck.

Think of apml as a weird hybrid a drawing tool. You type ASCII text in the input box and special characters are interpreted to draw AP-style blocks. There are really only 6 special characters: [ ] ( ) | <- (square brackets, parentheses, pipes, and left-arrow).

Here's how to use it:

Mini doc:

  1. [ code ] -- Rounded Rectangle - used by most ap-style statements. e.g. [a <- 7]
  2. ( condition ) -- Oval - used by conditions and conditional expressions
  3. | value/expr | -- Square Rectangle - used for arguments, parameters and some expressions
  4. <- -- Converts to left arrow symbol: ←
  5. (2 spaces) -- use for indenting. Single spaces are ignored.
Half-thing: making blocks gray
  • IF, REPEAT, PROCEDURE, FOR -- The interpreter will recognize these keywords and make the block be shaded in gray. You don't have to do anything to make the blocks gray. It is done auto-magically.

  • APML and AP-to-blocks converter. © Baker Franke 2017

    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.