User Tools

Site Tools


twine1:radio

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
twine1:radio [2017/09/15 17:57]
videlais created
twine1:radio [2017/10/10 00:39] (current)
Line 1: Line 1:
 ====== <<​radio>>​ ====== ====== <<​radio>>​ ======
  
-The <<​radio>>​ macro creates ​'radio' <input> ​HTML element starting from the macro to the end of the current line.+The <<​radio>>​ macro lets you offer your reader with familiar ​radio button ​input. While a [[twine1: 
 + ​button | <<​checkbox>>]] set lets the reader make multiple choices, radio buttons are mutually exclusive--your reader can choose only one option.
  
-===== Example ===== +Note that, in order for the value to be stored, there must be a [[ twine1:​button | <<​button>>​]] in the passage, and the user must click it. 
-<code+ 
-<<​radio>>​This is a radio input +This code sample: 
-</code>+ 
 +    Would you like to see some radio buttons? 
 +     
 +    <<​radio $choice "​yes">>​ 
 +    <<​radio $choice "​no">>​ 
 +    <<​radio $choice "​maybe">>​ 
 +     
 +    <<​button [[Go on|go_on]]>>​ 
 + 
 +Creates this set of options: 
 + 
 +{{:​twine_radio_buttons_default.png|}} 
 + 
 +In this example, the variable $choice is the name for this set of radio buttons. You can set this to any variable name you like. 
 + 
 +You see each input has a value--in this example, "​yes,"​ "​no,"​ and "​maybe."​ These are what will be displayed to the reader AND stored in the variable ($choice) to be used in the next passage. 
 + 
 +Thus if a reader chooses "​maybe"​ and clicks the button "Go on," it's the same as telling Twine this: 
 + 
 +    <<set $choice ​"​maybe">>​ 
 + 
 + 
 +Twine 1 forces a line break between radio buttons. To work around this, you can set your radio buttons in an HTML table: 
 + 
 +    <table
 +        <​tr>​ 
 +            <​td>​Sound?</​td><​td>​<<​radio ​$sound "​yes"​>></​td><​td><<​radio $sound "​no">></​td>​ 
 +        </​tr>​ 
 +        <​tr>​ 
 +            <​td>​Color effects?</​td><​td><<​radio $color_effects "​yes">></​td><​td><<​radio $color_effects "​no">></​td>​ 
 +        </​tr>​ 
 +    </​table>​ 
 +    <<​button [[Begin the Game|Begin]]>>​ 
 + 
 + 
 +This code sample creates this: 
 + 
 +{{:​twine_radio_buttons_table.png|}} 
 + 
 + 
 +There is no native option to mark a radio button as selected before your reader makes their choice. 
 + 
 +One option to work around this in Twine natively is to initialize your variable to the default value and offer the reader only the other choice(s):​ 
 + 
 + 
 +    <<​set $sound = "​no">>​\ 
 +    <<set $color_effects = "​no">>​ 
 +    <​table>​ 
 +        <​tr>​ 
 +            <​td>​Sound?​</td><​td></​td><​td><<​radio $sound "​yes">></​td>​ 
 +        </​tr>​ 
 +        <​tr>​ 
 +            <​td>​Color effects?</​td><​td></​td><​td><<​radio $color_effects "​yes">></​td>​ 
 +        </​tr>​ 
 +    </​table>​ 
 +    <<​button [[Start the Game|start_game]]>>​ 
 + 
 +{{:​twine_radio_buttons_special.png|}}  
 + 
 +A disadvantage of this approach is that, once the option is checked, it can't be unchecked back to whatever you set as the default.
  
twine1/radio.1505498245.txt.gz · Last modified: 2017/10/10 00:38 (external edit)