CYO

About

CYO is a powerful markup language that is powered by Angular.js that requires no technical knowledge to use. It is ideal for forms, games and user experience.

CYO can be used to make...

Download on Github!

CYO's Sale Pitch

CYO is not really a library. It's more like a new language build with interactivity in mind.

How does CYO benefit YOU?

CYO is used to add interactivity to any web page with zero programming required. Write interactive scenarios with intuitive markup instead, then add CSS to it.

CYO is a tool you can use to share your interactive stories on any modern device, including tablets and phones.

Write elaborate and exciting tales, full of interactivity, without learning any programming language.

CYO is a super lightweight library, that has only Angular.js as a dependency.

CYO is open source, and uses all the best Angular.js best practices. It can cut the time you spend developing simple forms in half.

You're interacting with CYO right now.

This interactive questionnaire was written with simple markup. No code was needed. See the full markup below!

We hope you start using CYO to speed up your designing and prototyping today!

We hope you include CYO in your projects from now on! Don't forget to star the repository.

We hope that CYO speeds up your storytelling process and lets you express the awesome stories you want to tell today!

<story>
  <h2>CYO's Sale Pitch</h2>

  <page>
      <p>
          CYO is not really a library. It's more like a new language build with interactivity in mind.
      </p>
      <p>
          How does CYO benefit YOU?
      </p>
      <button choice designer>I'm a designer</button>
      <button choice storyteller>I'm a storyteller</button>
      <button choice developer>I'm a developer</button>
  </page>
  <page designer>
      <p>CYO is used to add interactivity to any web page with zero programming required. Write interactive scenarios with intuitive markup instead, then add CSS to it.</p>
      <event is-designer></event>
      <button choice what-is>But what <i>is</i> CYO?</button>
  </page>
  <page storyteller>
      <p>CYO is a tool you can use to share your interactive stories on any modern device, including tablets and phones.</p>
      <p>Write elaborate and exciting tales, full of interactivity, without learning any programming language.</p>
      <event is-storyteller></event>
      <button choice what-is>But what <i>is</i> CYO?</button>
  </page>
  <page developer>
      <p>CYO is a super lightweight library, that has only Angular.js as a dependency.</p>
      <p>CYO is open source, and uses all the best Angular.js best practices. It can cut the time you spend developing simple forms in half.</p>
      <event is-developer></event>
      <button choice what-is>But what <i>is</i> CYO?</button>
  </page>
  <page what-is>
      <p>You're interacting with CYO right now.</p>
      <p>This interactive questionnaire was written with simple markup. No code was needed. See the full markup below!</p>
      <condition is-designer>
          <p>We hope you start using CYO to speed up your designing and prototyping today!</p>
      </condition>
      <condition is-developer>
          <p>We hope you include CYO in your projects from now on! Don't forget to star the repository.</p>
      </condition>
      <condition is-storyteller>
          <p>We hope that CYO speeds up your storytelling process and lets you express the awesome stories you want to tell today!</p>
      </condition>
   </page>
</story>                 

Getting Started

If you're technical, getting started is simple. Just require the "CYO" module in your app and you'll have access to all the directives.

If the last sentence made your head hurt, just copy the follow boilerplate into an empty HTML file, and it will work out of the box.

<doctype html>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/danielstern/cyo/master/cyo.js"></script>
<story>
    <h1>CYO</h1>
</story>

Markup

story

This element contains all other CYO elements. Start each story with one of these.

page

This element will appear only if a choice with the same name as it is clicked.

choice

These buttons will turn on a page. When you click one, the other choices on the page disappear.

event

This invisible element will reveal condition elements that appear later with the same name.

condition

This element is hidden by default, but will appear if the matching condition is revealed.

restart

This button will reset the story the contains it.

Download on Github!

Examples

A Game

You're in a spooky forest.

"You'll never get out of here alive," says Smeemog, the grumpy dwarf.

"I'll show you who won't get out of here alive," you say, but deep down, you're worried he's right.

"We should wait here until we get rescued."

"Thought it might be snakes, or maybe a pit, but I never thought I'd be bored to death."

In the clearing of the forest, there are three rocks, a tree, and, in another tree, a preposterous-looking owl.

For a while you talk to the owl. It seems to ignore you. Suddenly, it cocks its head towards a hollow in an old tree.

You reach inside, and pull out a mysterious wooden flute.

"Hmm, now I've seen everything".

One thing about yourself that you know for sure - you hate owls/

"Hey! Owl! You're stupid-looking!"

The owl cocks its head at you bemusedly.

What a stupid owl, you laugh.

Suddenly, the owl swoops down and carries you off. It is a big owl indeed.

You are never seen again.

You walk up to the pile of rocks.

It's just a pile of rocks, you think.

You walk up to the tree. You reckon it to be mighty old. Maybe a bazillion years or more. You notice a strange carving on the tree.

The carving depicts a great monster, twenty feet tall or more.

"Pshh. A huge monster, have you ever heard anything so ridiculous, Smeemog? ... Smee?"

You turn around, but in fact Smeemog has been eaten by a giant monster.

The monster devours you as you beg for mercy.

"Let's get out of here," you say to the dwarf.

"Fool!" He shouts. "Fool!" But he follows anyways.

After a short time, you see a bridge and, on the other side, the exit of the woods.

As you are crossing, a fearsome troll climbs out from under the bridge.

"Who dare to cross me bridge?" he bellows.

You play the flute, and the troll disappears in a cloud of smoke.

"I'll get you, Owl!" he curses.

You and Smeemog escape the forest safely.

You win!

"It is we," you say.

"I care not who ye are! I demand yer bones as payment for trespassin'."

You're boned!

The Markup for Story

<story>
  <h2>A Game</h2>
  <page intro>
      <p>You're in a spooky forest.</p>
      <p>"You'll never get out of here alive," says Smeemog, the grumpy dwarf.</p>
      <p>"I'll show you who won't get out of here alive," you say, but deep down, you're worried he's right.</p>
      <button choice stay-put>Wait to get rescued</button>
      <button choice look-around>We must explore this magic forest</button>
  </page>
  <page stay-put>
      <p>"We should wait here until we get rescued."</p>
      <p>"Thought it might be snakes, or maybe a pit, but I never thought I'd be <i>bored</i> to death."</p>
      <p>In the clearing of the forest, there are three rocks, a tree, and, in another tree, a preposterous-looking owl.</p>
      <button choice investigate-rocks>I ought to investigate these rocks</button>
      <button choice check-tree-out>I want to check out this tree</button>
      <button choice talk-to-owl>"Hey you! Owl! I'm talking to you."</button>
  </page>
  <page talk-to-owl>
      <p>For a while you talk to the owl. It seems to ignore you. Suddenly, it cocks its head towards a hollow in an old tree.</p>
      <p>You reach inside, and pull out a mysterious wooden flute.</p>
      <event got-flute></event>
      <p>"Hmm, now I've seen everything".</p>
      <button choice taunt-owl>I ought to taunt that preposterous owl.</button>
      <button choice look-around>Let's get moving.</button>
  </page>
  <page taunt-owl>
      <p>One thing about yourself that you know for sure - you hate owls/</p>
      <p>"Hey! Owl! You're stupid-looking!"</p>
      <p>The owl cocks its head at you bemusedly.</p>
      <p>What a stupid owl, you laugh.</p>
      <p>Suddenly, the owl swoops down and carries you off. It is a big owl indeed.</p>
      <p><i>You are never seen again.</i>
      </p>
      <button restart>Play again?</button>
  </page>
  <page investigate-rocks>
      <p>You walk up to the pile of rocks.</p>
      <p>It's just a pile of rocks, you think.</p>
      <button choice look-around>Let's get out of here.</button>
  </page>
  <page check-tree-out>
      <p>You walk up to the tree. You reckon it to be mighty old. Maybe a bazillion years or more. You notice a strange carving on the tree.</p>
      <p>The carving depicts a great monster, twenty feet tall or more.</p>
      <p>"Pshh. A huge monster, have you ever heard anything so ridiculous, Smeemog? ... Smee?"</p>
      <p>You turn around, but in fact Smeemog has been eaten by a giant monster.</p>
      <p>The monster devours you as you beg for mercy.</p>
      <button restart>Play again?</button>
  </page>
  <page look-around>
      <p>"Let's get out of here," you say to the dwarf.</p>
      <p>"Fool!" He shouts. "Fool!" But he follows anyways.</p>
      <p>After a short time, you see a bridge and, on the other side, the exit of the woods.</p>
      <p>As you are crossing, a fearsome troll climbs out from under the bridge.</p>
      <p>"Who dare to cross me bridge?" he bellows.</p>
      <button choice introduce>Introduce yourself.</button>
      <condition got-flute>
          <button choice play-flute>Play the flute.</button>
      </condition>
  </page>
  <page play-flute>
      <p>You play the flute, and the troll disappears in a cloud of smoke.</p>
      <p>"I'll get you, Owl!" he curses.</p>
      <p>You and Smeemog escape the forest safely.</p>
      <p><i>You win!</i>
      </p>
      <button restart>Play again?</button>
  </page>
  <page introduce>
      <p>"It is we," you say.</p>
      <p>"I care not who ye are! I demand yer bones as payment for trespassin'."</p>
      <p><i>You're boned!</i>
      </p>
      <button restart>Play again?</button>
  </page>
</story>            

Download on Github!

Troubleshooting

Thanks for using our product! Let us help you troubleshoot.

Are you using the latest version of our software?

Please update to the latest version of the software.

Do you have a dedicated graphics card?

Please disable "Use Hardware Acceleration" in Options > Graphics.

Please e-mail technical support with a description of your problem and we'll get back to you within 24 hours.

Thanks for using our product!

Markup for Troubleshooting

<story>
    <page>
        <h2>Troubleshooting</h2>
        <p>Thanks for using our product! Let us help you troubleshoot.</p>
        <p>Are you using the latest version of our software?</p>
        <button choice using-new-software>I'm using the latest version.</button>
        <button choice using-old-software>I'm not using the latest version of the software.</button>
    </page>
    <page using-old-software>
        <p>
            Please update to the latest version of the software.
        </p>
        <button choice problem-fixed>My problem has been solved.</button>
        <button choice using-new-software>That didn't help.</button>
    </page>
    <page using-new-software>
        <p>
            Do you have a dedicated graphics card?
        </p>
        <button choice email-support>I have a dedicated graphics card.</button>
        <button choice no-card>I don't have a dedicated graphics card.</button>
    </page>
    <page no-card>
        <p>Please disable "Use Hardware Acceleration" in Options > Graphics.</p>
        <button choice problem-fixed>My problem has been solved.</button>
        <button choice email-support>That didn't help.</button>
    </page>
    <page email-support>
        <p>Please e-mail technical support with a description of your problem and we'll get back to you within 24 hours.</p>
        <button restart>Try Again?</button>
    </page>
    <page problem-fixed>
        <p>Thanks for using our product!</p>
        <button restart>Try Again?</button>
    </page>
</story>
CYO is Developed by Azureda and is open-source and free. All CYO materials are copyrighted by the Must-Praise-Spaghetti-Monster license, which is self-explanatory.