Adding a new page

1. Find the page where you want to add a link to a new page (example http://switchcalc.com/want.html)

2. Right click on the page and select "Save as.." to save the html

3. Open the html file in a text editor

4. Find the button you want to change. For example, in:

    <a href="javascript:location.replace('break.html')" class="btn a" tabindex="2">I want a break</a>
    <div class="btn b eat" tabindex="3">I want to eat</div>
    <div class="btn c drink" tabindex="4">I want a drink</div>
    <div class="btn d listen" tabindex="5">I want to listen to music</div>
    <div class="btn e watch" tabindex="6">I want to watch something</div>

you have a link to the "break" page, followed by several buttons that say "I want to eat" etc. Let's say you want to change "I want to watch something" from just a button that says something to a link to a new page. Copy the code for the "break" section, and replace the code for the "I want to watch something" section with that, giving the new page a unique name like "watch" (update the btn and tabindex values as appropriate):

<a href="javascript:location.replace('watch.html')" class="btn e" tabindex="6">I want to watch something</a>

5. Remove the code that plays the "watch" .mp3 because that's for buttons, not links to other pages. Remove:

<audio id="watch" controls style="display:none"><source src="sounds/watch.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

6. Go to a page that looks like what you're trying to create for your new page. For example, http://switchcalc.com/break.html. Save that page, open it in a text editor, and save it with the name of your new page (e.g. watch.html).

7. Update the title of your new page, e.g. from <title>Break</title> to <title>Watch</title>

8. Update the alt text for info, e.g. from <img src="images/info.jpg" alt="You are on Break"> to <img src="images/info.jpg" alt="You are on Watch Something">

9. Update the buttons to match the content you want, e.g. from <div class="btn a rest" tabindex="2">I want to rest</div> to <div class="btn a test_kitchen" tabindex="2">America's Test Kitchen</div>

10. Update the audio tags, e.g. from <audio id="rest" controls style="display:none"><source src="sounds/rest.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio> to <audio id="test_kitchen" controls style="display:none"><source src="sounds/test_kitchen.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

11. Update talker.js. This file is available from switchcalc.com/cpanel. Login > File Manager > public_html > js, right click on talker.js and download.

12. Open you local talker.js in your text editor and go to the section where all of the lines like this are:

                    if ($(':focus').hasClass('leg')) {document.getElementById('leg').play()}
                    if ($(':focus').hasClass('feet')) {document.getElementById('feet').play()}

At the end of this list, enter lines for your new buttons, e.g. if ($(':focus').hasClass('test_kitchen')) {document.getElementById('test_kitchen').play()}

13. Create the mp3 files to go with your new buttons (do this like you would for updating daily and weekend audio files -- create the files test_kitchen.mp3, etc.)

14. Upload your new content using cpanel, e.g. want.html, watch.html, talker.js, mp3 files.