{"id":13394868,"url":"https://github.com/danielstern/cyo","last_synced_at":"2025-04-10T22:53:30.708Z","repository":{"id":11130265,"uuid":"13492683","full_name":"danielstern/cyo","owner":"danielstern","description":"Simple HTML Storytelling Engine","archived":false,"fork":false,"pushed_at":"2019-12-10T17:30:29.000Z","size":4113,"stargazers_count":180,"open_issues_count":0,"forks_count":22,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-10T22:53:25.216Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielstern.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-11T07:34:41.000Z","updated_at":"2025-03-10T07:02:26.000Z","dependencies_parsed_at":"2022-08-30T16:11:27.653Z","dependency_job_id":null,"html_url":"https://github.com/danielstern/cyo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Fcyo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Fcyo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Fcyo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielstern%2Fcyo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielstern","download_url":"https://codeload.github.com/danielstern/cyo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312172,"owners_count":21082638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:34.496Z","updated_at":"2025-04-10T22:53:30.686Z","avatar_url":"https://github.com/danielstern.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![cyo](https://github.com/danielstern/cyo/raw/revert-10-master/cyo-logo.png)\n\n# CYO (Choose Your Own) is an extremely simple, but powerful, storytelling engine built JavaScript.\n\n## \u003ca target=\"_new\" href=\"http://danielstern.github.io/cyo/\"\u003eCheck Out the Project Page\u003c/a\u003e\n\n\n## Introduction\n\nCYO lets you create exciting adventures using nothing but HTML code!\n\n\u003ca target=\"_new\" href=\"http://danielstern.github.io/cyo/\"\u003eSee how it works at the project page.\u003c/a\u003e\n\n## Patch Notes v3.1\n\n- Version 3.1 is a huge update that completely revises CYO - now way easier and simpler to use!\n- CYO 3.1 is no longer dependent on angular.js - just copy the script tag [(see Getting Started)](https://github.com/danielstern/cyo/tree/master/example) and you're good to go\n- Improved performance all around \n\n## Getting Started\n\n### Setting Up a Project\n\nGetting started couldn't be easier! Just copy this script tag onto your document.\n\n```html\n\u003cscript src=\"https://raw.githubusercontent.com/danielstern/cyo/master/cyo.js\"\u003e\u003c/script\u003e\n```\n\nNow you're ready to add `\u003cstory\u003e`, `\u003cpage\u003e` and `\u003cchoice\u003e` tags to your web page!\n\n[Follow the tutorial to get started with your project](https://github.com/danielstern/cyo/tree/master/example)\n\n\n## The Characters\n\n*Also known as \"The Directives\", wherein an interactive adventure is created, and Javascript (and Angular) fume about not being needed.*\n\nYou can use these tools freely in your project to create your own interactive story adventure.\n\n### Story\nThe story tag initializes your story by pointing to your first chapter.\n\nYou initialize your CYO with a simple `story` tag.\n\n```html\n\u003cstory\u003e\nAnd a splendid story it will be.\n\u003c/story\u003e\n```\n\nThis element has to contain all the other elements. You can have multiple stories on a single page.\n\n### Page\nPages are hidden automatically and appear when choices are pressed.\n\n```html\n\u003cpage\u003e\n\t\u003cp\u003e\n\t\tYou see a grizzled old man tending a hearth.\n\t\t\u003ci\u003eSomething doesn't feel right here.\u003c/i\u003e\n\t\u003c/p\u003e\n\u003c/page\u003e\n```\n\n### Choice\n\nChoices are what make the storytelling process interactive. Clicking a choice will reveal the corresponding page.\n\n```html\n\u003cpage\u003e\n    \u003cp\u003eYou see a fork in the path. \u003c/p\u003e\n    \u003cp\u003e*Hmm... should I go left or right?*\u003c/p\u003e\n\t\u003cchoice go-left\u003eGuess I'll go left.\u003c/choice\u003e\n\t\u003cchoice go-right\u003eRight, definitely right.\u003c/choice\u003e\n\u003c/page\u003e\n```\n\n### Event\n\nEvents allow you to remember something special happening, for use later in your story.\n\n```html\n\u003cp\u003eYou find a flashlight.\u003c/p\u003e\n\u003cevent found-flashlight\u003e\u003c/event\u003e\n```\n\n`event` tags are powerful tools that are automatically remembered for the whole story. They can change what the user sees and what choices they have when used in conjunction with the equally simple `condition` tag.\n\n### Condition\n\nCondition tags will show or hide content conditionally, perfect for use in combination with the `event` tag.\n\n`condition` tags will show or hide the content inside them based on `event` tags that the storygoer has previously encountered in their adventure.\n\n```html\n\u003cp\u003eSuddenly, you hear a terrifying noise.\u003c/p\u003e\n\u003ccondition found-flashlight\u003e\n\t\u003cp\u003eDon't be afraid, for the night is dark and full of terrors.\u003c/p\u003e\n\t\u003cchoice use-flashlight\u003eTurn on your flashlight\u003c/choice\u003e\n\u003c/condition\u003e\n\u003cchoice run-away\u003eRun for it!\u003c/choice\u003e\n```\n\nIn this example, if the storygoer had previously found the flashlight, they would see another paragraph and have the option to use their flashlight, going to the `use-flashlight` page.\n\nYou can reverse a condition to its negative by adding the word `not`\n\n```html\n\u003cp\u003e\n\tThe tall gate is locked and made of heavy iron bars.\n\u003c/p\u003e\n\u003cchoice go-home\u003eThese guys are closed.\u003c/choice\u003e\n\u003ccondition not pocket-knife-broke\u003e\n         \u003cp\u003e\n\t\t\"Don't worry... we can use my trusty pocket knife!\"\n         \u003cp\u003e\u003c/p\u003e\n\t\t\"Don't you mean your *rusty* pocket knife?\"\n         \u003c/p\u003e\n\t\u003cchoice break-lock\u003eLooks like they're not closed after all.\u003c/choice\u003e\n\u003c/condition\u003e\n```\n\n## Example\n\nThe markup of your typical page looks like this.\n\n```html\n\u003cpage exploring-the-house\u003e\n\u003cp\u003e\n\tThe floor creaks as you step into the house's massive foyer. Grimy paintings \n\tof gaunt and ghastly figures line the walls, and go all the way up to the \n\tceiling. There is table in the middle of the room. \n\u003c/p\u003e\n\u003cp\u003e\n\t\"Looks like Sal already got this room pretty good,\" says Brad nervously.\n\u003c/p\u003e\n\u003cp\u003e\n\t\"Looks like it.\"\n\u003c/p\u003e\n\u003c!-- The following paragraph will only appear if you got the necklace in \n\tchapter one --\u003e\n\u003ccondition get-necklace\u003e\n\t\u003cp\u003e\n\t\tThe figures in the wall all seem old and tired. Rarely are they smiling. \n\t\tMany of the men have long mustaches. You notice someone familiar in one of \n\t\tthe paintings.\n\t\u003c/p\u003e\n\t\u003cp\u003e\n\t\t\u003ci\u003eThat's impossible.\u003c/i\u003e Suddenly, you reach for the necklace in your \n\t\tpocket and pop it open. Sure enough. The woman is clearer in the picture. \n\t\tShe is has blonde hair and a striking face. She is not smiling in the \n\t\tpicture on the wall either. Below the picture you see the words \u003ci\u003eEliza \n\t\tBedford.\u003c/i\u003e\n\t\u003c/p\u003e\n\t\u003c!-- Your character learns Eliza's name and this comes in handy later. This \n\tevent never triggers if the condition it's inside isn't fulfilled. --\u003e\n\t\u003cevent learned-elizas-name\u003e\u003c/event\u003e\n\t\u003cp\u003e\n\t\t\"What are you looking at?\" asks Brad.\n\t\u003c/p\u003e\n\t\u003cp\u003e\n\t\t\"Nothing.\"\n\t\u003c/p\u003e\n\u003c/condition\u003e\n\u003cp\u003e\n\tThe room has a dreary air of sadness about it. The wallpaper, purpled with \n\ttime, peels from the walls. Engraved candlesticks stand guard in neatly \n\tordered rows all around upper wall of the massive room. \u003ci\u003eThose look \n\tvaluable. A wonder someone hasn't taken them yet.\u003c/i\u003e\n\u003c/p\u003e\n\u003cp\u003e\n\t\"Well, boys,\" says crazy Jake, rubbing his hands together. \"Let's not get too \n\tcomfortable.\"\n\u003c/p\u003e\n\u003cp\u003e\n\t\"I'm going to look upstairs,\" says Brad. \"Get a handful of jewels and get out \n\tof here.\"\n\u003c/p\u003e\n\u003cp\u003e\n\tYou get a weird feeling in your stomach. You can't figure out what it is.\n\u003c/p\u003e\n\u003c!-- This page ends with two choices thereby allowing the story to go on\n as a new page is loaded. --\u003e\n\u003cchoice go-with-brad\u003eGo with Brad\u003c/choice\u003e\n\u003cchoice go-with-jake\u003eGo with Jake\u003c/choice\u003e\n\u003c/page\u003e\n```\n\nOnce you click a choice, all the other choices on the page disappear.\n\n\n## Making Your Own\n\nPlease use this tool to make your own adventures and share them. If you have any questions, or need a new feature to complete your latest epic, post it up here. Better yet, add the feature yourself and make a pull request. \n\n### Made a Game with CYO?\n\nI'd be happy to link to it on the project page! Get in touch with me @danieljackstern or daniel@danielstern.ca\n\nHappy adventuring!\n\n\u003ca target=\"_new\" href=\"http://danielstern.github.io/cyo/\"\u003eCheck Out the Project Page for More Examples\u003c/a\u003e\n-----------\n\n*CYO was created by Daniel Stern*\n\n## Configuration\nLimited configuration objects can be set per story by using an HTML tag.\n\n### Example\n```javascript\n\u003cstory the-aztec-ruins\u003e\n    \u003cpageDirectory pages/\u003e\n    ...\n\u003c/story\u003e\n```\n\n### Supported Configuration Settings\n\n| Name | Effect | Default | Example |\n| -------------      | --------------- | ----- |\n| `pageDirectory`    | Specifies where to look for external pages | `\"\"`      | \n\n\n## Troubleshooting\nNo one gets it perfect the first time!\n\n### Help! My story just won't work!\nFollow the Creating a Story Tutorial (click here).\n\n### Some page I made isn't appearing or isn't loading correctly\nOpen the Developer Console in Chrome by pressing F12. Helpful messages will appear in yellow indicating common mistakes like mismatched file names.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielstern%2Fcyo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielstern%2Fcyo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielstern%2Fcyo/lists"}