How To: Dialogue Choices & Variations

This is a rundown on how to handle text variations!

These rules are more of a guideline than hard rules - always choose what is most "readable" and sensical when viewed as a complete page. These are simply the methods that have so far passed the test of time.

Table of Contents Terminology Single Line Variations Multi-line Variations Siffrin Portraits Dialogue Options Integration into further text Exceptions

Terminology

Across the site, it's best to keep terms used to address variations consistent. The most important of these are:

X amount of times:

• First time
• Subsequent times

The word for the number is written out, e.g. "Second/Third/Fourth time"

In X Act:

• ACT 1
• ACT 2 & 3
• ACT 4 only
• ACT 2, 3 & 4

ACTs are written in all uppercase. If multiple acts apply, they are connected by an ampersand. If there's not a variation, but an addition that occurs in a specific act, it's "ACT X only" (meaning, if there is a line that is not changed, but just does not exist in other acts.)

Varied conditions There's more freedom for other conditions. The important thing is to keep headings short. If a condition is complex, consider linking to another page that either shows the condition or explains it in depth.

Example (From acts/act3-4/isaquest)

<h4>If he's tried to confess at least <a href="/events/confession.html#second">twice</a></h4>

    <p class="dialogue-line">
        (You hold your breath.)
    </p>

    <hr>

    <h4>If Siffrin <a href="/events/confession.html#kissie">kissed him</a></h4>

    <p class="dialogue-line">
        (You look away.)
    </p>

Since explaining all of Bad Touch / Confession or what have you is a lot for a single heading, the headings instead link to the respective sections on the events/confession page. The headings make clear to someone who is familiar with the conditions what is meant, yet also gives the option to find out more for people who do not.

Similarly, some variations may be linked to long running questlines. For these, the script website uses the in-game terminology for quests for the most part (Kingquest/Loopquest/etc) and provides a link to the respective page. This may be more confusing to a new viewer, but it is a necessary evil to avoid having to type "If you complete the ACT 3 storyline about finding out more info on the King" instead of "After completing Kingquest"

Single Line Variations

If something varies, but only accounts for one single line, these may be presented using a simple list.

    <ul>
        <li><b>First time:</b> (Someone frozen in time.)</li>
        <li><b>Subsequent times:</b> (A housemaiden.)</li>
    </ul>

Some pages may still separate single line variations with a horizontal line (<hr>). This can be simplified into a list, but is not necessary.

Multi-line Variations

Siffrin Portraits

Dialogue Options

Selectable dialogue options are covered using the <details> tags inside of a list.

An example:

    <p class="dialogue-line">
        <span class="dialogue-head">
            <span class="dialogue-name">Siffrin</span>
            <span class="dialogue-expression">(what1)</span>
        </span>
        (A test for what.)
    </p>
    
    <ul class="dialogue-option">
        <li>
            <details>
                <summary>
                "A test for what?"
                </summary>
                <div class="dialogue">
                    <p class="dialogue-line">
                        <span class="dialogue-head">
                            <span class="dialogue-name">Loop</span>
                            <span class="dialogue-expression">(lol2)</span>
                        </span>
                        I wink at the camera.
                    </p>
                </div>
            </details>
        </li>
        <li>
            <details>
                <summary>(Stay silent.)</summary>
                <div class="dialogue">

                    <p class="dialogue-line">
                        <span class="dialogue-head">
                            <span class="dialogue-name">Loop</span>
                            <span class="dialogue-expression">(teehee2)</span>
                        </span>
                        My my, struck speechless, are you?
                    </p>
                </div>
            </details>
        </li>
    </ul>

As you can see here, the leading internal thoughts and portrait for Siffrin are a separate line of text, as already shown in the previous page, [How To: Formatting]. 

Separate dialogue options are all contained in a list with the class "dialogue-option" <ul class="dialogue-option">. Each option is in its own <li> tag without a class, and then further inside a <details> tag.

The '''selectable option''' is the test inside the <summary> tag. Any text following this choice is in its '''own dialogue div''' inside the details tag.

It should be avoided to have '''more than two''' options inside one of another (i.e. dialogue ul inside a dialogue ul).



== Integration into further text ==


* Any preceding thoughts for Siffrin are not separated in any way and follow each other without a line break
* Once text reconvenes after the dialogue choice, separate the ul and the following text using a line break (<br>)

<pre>

<p class="dialogue-line">
        <span class="dialogue-head">
            <span class="dialogue-name">Siffrin</span>
            <span class="dialogue-expression">(what1)</span>
        </span>
        (Example thoughts.)
    </p>

    <ul class="dialogue-option">
        <li>
            <details>
                <summary>Option 1</summary>
                <div class="dialogue">
                    Text.
                </div>
            </details>
        </li>
        <li>
            <details>
                <summary>Option 2</summary>
                <div class="dialogue">
                    Text.
                </div>
            </details>
        </li>
    </ul>

    <br>

    <p class="dialogue-line">
        <span class="dialogue-head">
            <span class="dialogue-name">Loop</span>
            <span class="dialogue-expression">(teehee2)</span>
        </span>
        That's weird to say, stardust~
    </p>

Exceptions

Some pages prefer to have dialogue options as separate headings instead of containted within an ul. These pages are the ones that serve as a compilation of single conversations, e.g. the "Friend Beginning/End Talk" pages, or the Loop WhatToDo pages. These pages are huge, and putting their entire contents into a list like this would be cumbersome.

In addition, separate headings for dialogue choices may be considered for pages where the choices lead to major and long lasting deviations.