{{!
This is a hogan template.
Model for this view is defined as viewModel variable in js/HelpPage.js
}}

<article class="container">
    <h2 id="snTopics" tabindex="0" class="focusable">Topics</h2>
    <nav role="navigation">
        <ul class="help-toc" aria-label="Table of Contents">
            <li><a href="#snReadOffline" class="js-view-help">Read Offline</a></li>
            <li><a href="#snNavigation" class="js-view-help">Navigation</a></li>
            <li><a href="#snDisplaySettings" class="js-view-help">Display Settings</a></li>
            <li><a href="#snBookmarks" class="js-view-help">Bookmarks</a></li>
            <li><a href="#snNotesHighlights" class="js-view-help">Notes, Highlights, and More</a></li>
            <li><a href="#snKeyBoard" class="js-view-help">Keyboard Shortcuts</a></li>
        </ul>
    </nav>
    <h2 id="snReadOffline" tabindex="0" class="focusable">Read Offline</h2>
    <h3>Save Your Book</h3>

    <p>You can save your book to read offline by hovering over the left side of your browser and clicking on the
        <strong>Menu</strong> icon.</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image1.png" alt="menu icon"></div>

    <p>The menu will expand. Click <strong>Offline Access</strong>.</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image2.png" alt="offline access"></div>

    <p>You must allow pop-ups to display in your browser to save your book for offline access.
        If you have a pop-up blocker, you'll need to manually enable pop-ups to successfully save your book.
        Below is an example of what this will look like on a Chrome browser.</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image6.png" alt="allow pop ups"></div>

    <p>In addition, with some browsers, you will be asked to confirm that the browser-based reader can store the offline book on your desktop.
        You will need to allow this in order to save your book.</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image7.png" alt="allow storage on device"></div>

    <p>The browser will save your book for offline reading.
        You will receive the below success message when the book has been saved successfully.
        Make sure you bookmark the page you're on so you can easily return to your book when you are offline.</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image3.png" alt="success message"></div>

    <p>Click <strong>Return to Your Book</strong> to go back to your book and continue where you left off.</p>

    <h3>Access Your Book Offline</h3>
    <p>To access the books you've saved for offline reading, click on your <strong>saved bookmark</strong> to go to
        your <strong>Offline
            Content Library</strong>. A list of the books you've saved for offline reading will display. Click on a book jacket to
        open your book and immediately begin reading!</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image4.png" alt="offline content library"></div>

    <p>You can view your Offline Content Library at any time by going to the main <strong>Menu</strong> and then
        selecting <strong>Offline Content Library</strong>.</p>

    <div class="img-wrap"><img src="{{imageFolder}}/image5.png" alt="offline content library option"></div>


    <h2 id="snNavigation" tabindex="0" class="focusable">Navigation</h2>
    <h3>Table of Contents</h3>
    <p>Access your book's Table of Contents (TOC) by hovering over the upper left side of your browser and then
        clicking the <strong>Menu</strong> icon.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image1.png"
                               alt="menu icon"></div>


    <p>The menu will expand. If your book contains a linkable TOC, it will display here. You can scroll up and down
        the TOC to find what you need. Click on the <strong>chapter name</strong> to go directly to that place in
        your book. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image8.png"
                               alt="table of contents"></div>


    <h3>Page Forward and Backward</h3>
    <p>To page forward, press the <strong>right arrow key</strong> on your keyboard. To go backward,
        press the <strong>left arrow key</strong> on your keyboard. Alternatively, you can also
        <strong>hover</strong> over the right or left side of your browser and select the associated
        <strong>arrow</strong> to go forward and backward within your book. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image9.png"
                               alt="left arrow key"><img src="{{imageFolder}}/image10.png"
                                                         alt="right arrow key"></div>


    <h3>Logging Out</h3>
    <p>If you need to log out of the browser reader, select <strong>Logout</strong> from the main menu. Remember, if you log
        out, you will not be able to access any of your content offline. Logging out of your account will flush the
        cached book from the system. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image11.png"
                               alt="logout"></div>

    <p>If you share the device you’re using to read your title with others, you'll need to make sure you log out of your account if you do not want others to see your checked out items. The other patron will need to log in to their own respective accounts in order to see their checked out items. This will require an active internet connection.  </p>

    <h2 id="snDisplaySettings" tabindex="0" class="focusable">Display Settings</h2>
    <h3>Font Options</h3>
    <p>Click on the double A icon in the upper right corner of your browser window to open the <strong>Display
        Options</strong> area. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image12.png"
                               alt="display options icon"></div>


    <p>You can make changes to your font size, the background color, and the layout. Changes you make here will
        display and save immediately in the background, so you can instantly view your changes.
    <ul>

        <li><strong>Font (1) </strong> – Use the <strong>slider</strong> to increase or decrease the size of your
            font. Alternatively, you can click on either <strong>A icon</strong> to increase or decrease the size of
            your font.
        </li>

        <li><strong>Page Layout (2) </strong> – If you want to display one or two pages at a time, click on the
            associated <strong>icon</strong>     in this section. Select <strong>Auto</strong> to view pages as designated by the
            publisher.
        </li>

        <li><strong>Themes (3) </strong> – Click on a <strong>color swatch</strong> to change the background and
            font color to something you find more legible.
        </li>
    </ul>
    </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image13.png"
                               alt="display options menu"></div>


    <h2 id="snBookmarks" tabindex="0" class="focusable">Bookmarks</h2>
    <p>To create a bookmark, click on the <strong>Bookmark icon</strong> in the upper right corner of your screen.
    </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image14.png"
                               alt="bookmark icon"></div>


    <p>The <strong>Add Bookmark</strong> panel will display. Click the <strong>plus icon</strong> to add your
        bookmark. You can delete an existing bookmark by clicking on the <strong>trash can icon</strong>.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image15.png"
                               alt="bookmarks menu"></div>


    <h2 id="snNotesHighlights" tabindex="0" class="focusable">Notes, Highlights, and More</h2>

    <p>To highlight a portion of text, just select that text with your mouse. When you release your mouse button, a
        pop-up window will display. From here, you can select one of the following options:
    <ul>

        <li>Highlight the text</li>

        <li>Take a note</li>

        <li>Look for the text within Google</li>

        <li>Look for the text within Wikipedia</li>

        <li>Define the selected word</li>
    </ul>
    </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image16.png"
                               alt="highlight popup"></div>


    <h3>Highlighting</h3>
    <p>Select <strong>Highlight</strong> to display the highlight colors menu. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image17.png"
                               alt="highlight icon"></div>


    <p>Click on the color you wish to associate with the selected text. The color will change immediately. If you
        want to remove the highlight entirely, click on the <strong>trash can icon</strong>.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image18.png"
                               alt="highlight colors"></div>


    <h4>View and Edit Your Saved Highlights</h4>
    <p>You can view a list of all your saved highlights and notes by clicking on the <strong>Highlight and
        Notes icon</strong> in the upper right corner of your browser window. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image19.png"
                               alt="notes icon"></div>


    <p>Sort your highlights and notes by <strong>Color</strong> or by <strong>Date</strong>. Click on a
        highlight to go directly to that place in your book. Click on the <strong>trash can icon</strong> to
        delete that highlight or note.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image20.png"
                               alt="notes menu"></div>


    <p>If you want to create a note with a saved highlight, or change the color of the highlight, click the
        <strong>plus icon</strong> next to the associated highlight.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image21.png"
                               alt="edit note"></div>


    <p>A text field will display. You can enter text within this field to create a note. Additionally, if
        you want to change the color of your highlight, just click on another <strong>color swatch</strong>.
        Click <strong>Save</strong> once you are done to save your changes. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image22.png"
                               alt="save your note"></div>


    <p>You can view a list of all your saved highlights and notes by clicking on the <strong>Highlight and
        Notes icon</strong> in the upper right corner of your browser window. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image19.png"
                               alt="notes icon"></div>


    <h3>Notes</h3>
    <p>Select <strong>Note</strong> to create a note. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image23.png"
                               alt="notes icon"></div>


    <p>A text window will display. From here, enter the text for your note. If you want to save the note as
        a highlight, select the <strong>color swatch</strong> you desire from the pop-up window. Click
        <strong>Save</strong> to save your changes. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image24.png"
                               alt="create a note"></div>


    <h4>View and Edit Your Saved Notes</h4>
    <p>Sort your highlights and notes by <strong>Color</strong> or by <strong>Date</strong>. Click on a note
        to go directly to that place in your book. Click on the <strong>trash can icon</strong> to delete
        that highlight or note.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image20.png"
                               alt="notes menu"></div>


    <p>If you need to edit a note, click on the <strong>pencil icon</strong>. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image25.png"
                               alt="pencil icon"></div>


    <p>The notes text field will display for editing. In addition to changing your text, you can also create
        a highlight or change the color of the existing highlight associated with your note. Once you make
        your changes, click <strong>Save</strong>. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image26.png"
                               alt="edit the text of a note"></div>


    <h3>Look Up a Word or Phrase in Google</h3>
    <p>Select <strong>Google</strong> to look up your selected text in Google. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image27.png"
                               alt="google icon"></div>


    <p>A list of ten results from Google will display. Click one of the results to open up a new browser tab
        with that link. Click on the <strong>X icon</strong> to close the search results portion of the
        page. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image28.png"
                               alt="google search results"></div>

<!-- Wikipedia removed in QA2 Production -->
<!-- 
    <h3>Look Up a Word or Phrase in Wikipedia</h3>
    <p>Select <strong>Wikipedia</strong> to look up your selected text in Wikipedia. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image29.png"
                               alt="Wikipedia icon"></div>


    <p>A list of ten results from Wikipedia will display. Click one of the results to open up a new browser
        tab with that link. Click on the <strong>X icon</strong> to close the search results portion of the
        page. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image30.png"
                               alt="Wikipedia search results"></div> -->


    <h3>Define a Word</h3>
    <p>Select <strong>Define</strong> to look up the definition of your selected text. </p>
    <div class="img-wrap"><img src="{{imageFolder}}/image31.png"
                               alt="define icon"></div>


    <p>A list of definitions will display, along with the source for the definition. Click on the <strong>X
        icon</strong> to close the definition portion of the page.</p>
    <div class="img-wrap"><img src="{{imageFolder}}/image32.png"
                               alt="definition results"></div>

    <h2 id="snKeyBoard" tabindex="0" class="focusable">Keyboard Shortcuts</h2>

    <p>Use the following keyboard shortcuts to navigate throughout the site without using your mouse.</p>
    <ul>

        <li><strong>Toggle the Help Menu</strong> &ndash; H</li>

        <li><strong>Toggle the Font Display Options</strong> &ndash; O</li>

        <li><strong>Toggle the Notes/Highlights Menu</strong> &ndash; N</li>

        <li><strong>Toggle the Bookmark Menu</strong> &ndash; B</li>

        <li><strong>Show Navigation</strong> &ndash; V</li>

        <li><strong>Hide Navigation</strong> &ndash; X</li>

        <li><strong>Show the Table of Contents and Main Menu</strong> &ndash; M</li>

        <li><strong>Previous Page</strong> &ndash; Left Arrow or Page Up</li>

        <li><strong>Next Page</strong> &ndash; Right Arrow or Page Down</li>

    </ul>

</article>