CYOA Form

This Form is a simply way to custom build your own CYOA html page apps, the resulting page will be entirely self-contained html file/app and can be shared as a file or hosted on a webpage(as can this form if downloaded from it's github page ). The form is ready to build with some example values for guidance. At the bottom of this page you can also backup & reimport your work as a .json file.

Github Page
CYOA Form
CYOA Character Setup
Purchasing Points

To setup point purchasing, with which choices will be bought, setup at least one, and at most 4 (more will break mobile styling).

Purchasing Points Settings*

Can use icon for points, recommend ~100x100, .png required for transparency

img

Purchasing Points Settings*

Can use icon for points, recommend ~100x100, .png required for transparency

img

A short summary of the setting

Choices Setup

Setup the list of player choices.

App Header

Settings for the Page Header.

Give the page a logo.

img

Setup World Introduction

Describe the world, the Sub-section is optional.

Add any text you want to appear after the choice selection list.

Choices

The types of choices a player can take.

Choice-type Settings*

Sets the style of the options, 'lines' are very wide and good for long descriptions, 'boxes' is for smaller options, and 'small boxes', is for very small options.

Purchase Options

unique; means a choice may only be taken once. Max taken of type; limits how many in total can be taken of this type of choice.

Options

The options available to choose.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

Choice-type Settings*

Sets the style of the options, 'lines' are very wide and good for long descriptions, 'boxes' is for smaller options, and 'small boxes', is for very small options.

Purchase Options

unique; means a choice may only be taken once. Max taken of type; limits how many in total can be taken of this type of choice.

Options

The options available to choose.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

Choice-type Settings*

Sets the style of the options, 'lines' are very wide and good for long descriptions, 'boxes' is for smaller options, and 'small boxes', is for very small options.

Purchase Options

unique; means a choice may only be taken once. Max taken of type; limits how many in total can be taken of this type of choice.

Options

The options available to choose.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

Option Settings*

img

Show
Set the effects of taking this choice

Here you will set what picking an option does, whether that's updating a profile image or how much it costs to take the option. Options not set will be ignored.

CYOA App Styling
App Color Styling

Select the color palette for the App, Character panel colors are for the panel which displays character information, the others are for the main choice area.

App layout

Sets sidebar width via css widths eg; '60px', '12rem', '40%'...

Background styling

Set a background Image, set how it centers/ is scaled, and if not providing a background image, a gradient can be set.

Import an image for use as the background.

img

CSS object-fit setting for images. [cover] retains aspect ratio, scales in size to fill area (expect cropping). [fill] loses aspect ratio, stretches to fill all 4 corners. [contain]/[scale-down] retains aspect ratio, scales down to ensure whole image is seen. [none] makes the image as big as it's pixel size, and centred.

list gradient colors as per css linear-gradient spec, for more information see https://www.w3schools.com/css/css3_gradients.asp

App themeing

Sets CYOA theme elements such as font & look

use css values, use 0 for square; 10px, 0.4rem, 30%...

use css values; 10px, 0.4rem, 30%...

Use any of the following; none, hidden ,dotted, dashed, solid, double, groove, ridge, inset, outset.

To apply backup, choose file below & hit import.