Building textarea with tags/variables

Question

I'm looking for an easy way an end user can generate "pseudo-code" on how to generate a final string. I think it would be easier if I gave an example.

I have the following variables:

• Round
• Game
• Wins
• Losses
• Player
• Opponent
• Rating

In the back end of my application, I'm doing this all manually.

echo Player + " is currently playing " + Opponent + ". Round: " + Round + ", Game: " + Game;
if ( Wins > Losses ) {
   echo " (Up a Game)";
} else if ( Wins < Losses ) {
   echo " (Down a game)";
}

What I'd like to ultimately do is give control to the end user of how this string is being displayed. I'd like them to add variables where they want, as well as add if/else statements.

I looked a bit into selectize and select2, and they seem to be on the right track of what I'm looking for, but doesn't really contain any if/else functionality I need. Something I have used in the past is Blockly which does contain if/else logic, but this can be a bit complex to the end user. Does anyone have any other recommendations of javascript/jQuery plugins/scripts I can use to accomplish this?

Answer 1

You can still use selectize and add some nice css features. E.g. you could use the data-value selector

[data-value="if"] {
    background-color: red;
}

to distinguish if/else tags from other tags. Next you could use the adjacent sibling css selector (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors) to find the next tag after an if statement to mark this aswell

[data-value="if"] + div {
    background-color: anything;
}

Moreover you can also distinguish variables using the same technique. Later, a parser could parse the if/else statements using regexp or whatever suits you best.

Someone could then write something like

[Player][" is currently playing "][Opponent][". Round: "][Round]
[", Game: "][Game][if][Wins>Losses][" (Up a Game)"][else][" (Down a game)"]

where the brackets indicate "tags". Your parser then should tread tags with quotations "" as string.