Declaring Variables, Sets and Relations

In the current version of StoryTeller, the author must write JavaScript code in order to declare variables, sets and relations.

Examples:

Variables:

variables = [
    {name: "boolVar", value: new BooleanVariable(true)},
    {name : "numVar", value: new NumberVariable(3.14159) },    
    { name : "intVar", value: new IntegerVariable(0, 65536, 0, false) },
];

Sets:

var characters = new Set(
    {name: "Dick Dastardly"},
    {name: "Muttley"},
    {name: "Penelope Pitstop"}
)

var items = new Set(
    {name: "rolling pin", "damage": 1, "sound": "crack"},
    {name: "plank", "damage": 3, "sound": "thwack"},
    {name: "golf club", "damage": 6, "sound": "clunk"},
    {name: "kitana", "damage": 10, "sound", "woosh"}
);

sets = [
    {name: "characters ", set: characters},
    {name: "items", set: items}
];

Relations:

relations = [
    {name: "isHolding", relation: new Relation(people,items)}
];

There's a few problems with this.

1. Lots of brackets and words are needed.
2. It's easy to make errors and being JavaScript they can be hard to find and fix.
3. It will be hard to parse when I write the GUI.

Due to this. I'm planning on implementing another way to declare these things (and probably removing the ability to define them with JavaScript). Authors will declare variables, sets and relations in the body of the html document, in divs marked with an attribute like data-init="variables".

Variables would look like this:

<div data-init="variables">
    boolVar: BooleanVariable(true);
    numVar: NumberVariable(3.14159);
    intVar: IntegerVariable(0, 65536, 0, false);
</div>

Relations would look like this:

<div data-init="relations">
    isHolding: characters, items;
</div>

However, I'm currently stuck on how to define sets. Sets with no extra information attached (like the characters set above) can easily be written in a manner similar to the relations:

<div data-init="sets">
    characters: "Dick Dastardly", "Muttley", "Penelope Pitstop";
</div>

...but attaching extra data (like "damage" and "sound" for the items set) is messier. The best I can come up with is to lay it out like a table:

 <div data-init="sets">
      items       ("damage", "sound"):
    {"rolling pin",  1,      "crack"},
    {"plank",        3,      "thwack"},
    {"golf club",    6,      "clunk"},
    {"kitana",      10,      "woosh"};
</div>

This doesn't seem completely right. It would be easy to make mistakes and the meaning of the symbols isn't really clear.

If you have any opinions or ideas on this please comment, either here or in the subreddit