week4/index.html

<!DOCTYPE html>
<html lang="en"><head>
<script src="index_files/libs/tone/tone.js"></script>
<script src="index_files/libs/clipboard/clipboard.min.js"></script>
<script src="index_files/libs/quarto-html/tabby.min.js"></script>
<script src="index_files/libs/quarto-html/popper.min.js"></script>
<script src="index_files/libs/quarto-html/tippy.umd.min.js"></script>
<link href="index_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/light-border.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/quarto-syntax-highlighting-dark-7a0e04ec82617701cd34937292aa414e.css" rel="stylesheet" id="quarto-text-highlighting-styles"><meta charset="utf-8">
  <meta name="generator" content="quarto-1.7.13">

  <meta name="author" content="JooYoung Seo">
  <title>Assistive Technologies</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="index_files/libs/revealjs/dist/reset.css">
  <link rel="stylesheet" href="index_files/libs/revealjs/dist/reveal.css">
  <style>
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    div.columns{display: flex; gap: min(4vw, 1.5em);}
    div.column{flex: auto; overflow-x: auto;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    ul.task-list li input[type="checkbox"] {
      width: 0.8em;
      margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
      vertical-align: middle;
    }
  </style>
  <link rel="stylesheet" href="index_files/libs/revealjs/dist/theme/quarto-c1f635a6a944ce379414891b33bb93f0.css">
  <link href="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.css" rel="stylesheet">
  <link href="index_files/libs/revealjs/plugin/reveal-menu/menu.css" rel="stylesheet">
  <link href="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.css" rel="stylesheet">
  <link href="index_files/libs/revealjs/plugin/quarto-support/footer.css" rel="stylesheet">
  <style type="text/css">
    .reveal div.sourceCode {
      margin: 0;
      overflow: auto;
    }
    .reveal div.hanging-indent {
      margin-left: 1em;
      text-indent: -1em;
    }
    .reveal .slide:not(.center) {
      height: 100%;
    }
    .reveal .slide.scrollable {
      overflow-y: auto;
    }
    .reveal .footnotes {
      height: 100%;
      overflow-y: auto;
    }
    .reveal .slide .absolute {
      position: absolute;
      display: block;
    }
    .reveal .footnotes ol {
      counter-reset: ol;
      list-style-type: none; 
      margin-left: 0;
    }
    .reveal .footnotes ol li:before {
      counter-increment: ol;
      content: counter(ol) ". "; 
    }
    .reveal .footnotes ol li > p:first-child {
      display: inline-block;
    }
    .reveal .slide ul,
    .reveal .slide ol {
      margin-bottom: 0.5em;
    }
    .reveal .slide ul li,
    .reveal .slide ol li {
      margin-top: 0.4em;
      margin-bottom: 0.2em;
    }
    .reveal .slide ul[role="tablist"] li {
      margin-bottom: 0;
    }
    .reveal .slide ul li > *:first-child,
    .reveal .slide ol li > *:first-child {
      margin-block-start: 0;
    }
    .reveal .slide ul li > *:last-child,
    .reveal .slide ol li > *:last-child {
      margin-block-end: 0;
    }
    .reveal .slide .columns:nth-child(3) {
      margin-block-start: 0.8em;
    }
    .reveal blockquote {
      box-shadow: none;
    }
    .reveal .tippy-content>* {
      margin-top: 0.2em;
      margin-bottom: 0.7em;
    }
    .reveal .tippy-content>*:last-child {
      margin-bottom: 0.2em;
    }
    .reveal .slide > img.stretch.quarto-figure-center,
    .reveal .slide > img.r-stretch.quarto-figure-center {
      display: block;
      margin-left: auto;
      margin-right: auto; 
    }
    .reveal .slide > img.stretch.quarto-figure-left,
    .reveal .slide > img.r-stretch.quarto-figure-left  {
      display: block;
      margin-left: 0;
      margin-right: auto; 
    }
    .reveal .slide > img.stretch.quarto-figure-right,
    .reveal .slide > img.r-stretch.quarto-figure-right  {
      display: block;
      margin-left: auto;
      margin-right: 0; 
    }
  </style>
</head>
<body class="quarto-dark">
  <div class="reveal">
    <div class="slides">

<section id="title-slide" class="quarto-title-block center">
  <h1 class="title">Assistive Technologies</h1>
  <p class="subtitle">Accessibility in HCI Seminar</p>

<div class="quarto-title-authors">
<div class="quarto-title-author">
<div class="quarto-title-author-name">
JooYoung Seo 
</div>
        <p class="quarto-title-affiliation">
            School of Information Sciences<br>University of Illinois at Urbana-Champaign
          </p>
    </div>
</div>

</section>
<section id="assistive-technologies-at-and-information-communication-technologies-ict" class="slide level2">
<h2>Assistive Technologies (AT) and Information Communication Technologies (ICT)</h2>
<ul>
<li class="fragment"><strong>AT:</strong> Tools and devices designed to help individuals with disabilities perform tasks and participate in daily life.</li>
<li class="fragment"><strong>ICT:</strong> Technologies that provide access to information and communication, such as computers, internet, mobile devices, and software applications.</li>
<li class="fragment"><strong>Intersection:</strong> Understanding how AT and ICT intersect is crucial for creating accessible digital experiences. ICT should be compatible with and usable by various AT.</li>
</ul>
</section>
<section>
<section id="assistive-technologies-for-visual-impairments" class="title-slide slide level1 center">
<h1>Assistive Technologies for Visual Impairments</h1>

</section>
<section id="screen-readers" class="slide level2">
<h2>Screen Readers</h2>
<ul>
<li class="fragment">Software that converts text and interface elements into speech or braille.</li>
<li class="fragment">Examples: JAWS, NVDA, VoiceOver, Orca</li>
<li class="fragment"><a href="https://www.nvaccess.org/">NV Access - NVDA Screen Reader</a></li>
<li class="fragment"><a href="https://www.freedomscientific.com/training/jaws/">Freedom Scientific - JAWS Screen Reader</a></li>
</ul>
</section>
<section id="magnification-software" class="slide level2">
<h2>Magnification Software</h2>
<ul>
<li class="fragment">Enlarges portions of the screen to make content easier to see.</li>
<li class="fragment">Examples: ZoomText, Windows Magnifier, macOS Zoom</li>
</ul>
</section>
<section id="braille-displays" class="slide level2">
<h2>Braille Displays</h2>
<ul>
<li class="fragment">Electronic devices that display text in braille, often used with screen readers.</li>
<li class="fragment">Provides tactile access to digital information.</li>
</ul>
</section></section>
<section>
<section id="assistive-technologies-for-auditory-impairments" class="title-slide slide level1 center">
<h1>Assistive Technologies for Auditory Impairments</h1>

</section>
<section id="assistive-listening-devices-alds" class="slide level2">
<h2>Assistive Listening Devices (ALDs)</h2>
<ul>
<li class="fragment">Amplify and clarify sound for individuals with hearing loss.</li>
<li class="fragment">Types: Hearing aids, cochlear implants, FM systems, induction loops.</li>
<li class="fragment"><a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">National Institute on Deafness and Other Communication Disorders (NIDCD) - Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders</a></li>
</ul>
</section>
<section id="captioning-and-subtitles" class="slide level2">
<h2>Captioning and Subtitles</h2>
<ul>
<li class="fragment">Textual representation of audio content in videos and live events.</li>
<li class="fragment">Essential for accessibility of multimedia content.</li>
</ul>
</section></section>
<section>
<section id="assistive-technologies-for-motor-impairments" class="title-slide slide level1 center">
<h1>Assistive Technologies for Motor Impairments</h1>

</section>
<section id="switch-devices" class="slide level2">
<h2>Switch Devices</h2>
<ul>
<li class="fragment">Allow users to interact with technology using alternative input methods.</li>
<li class="fragment">Activated by various movements: buttons, head switches, sip-and-puff.</li>
</ul>
</section>
<section id="eye-gaze-systems" class="slide level2">
<h2>Eye-Gaze Systems</h2>
<ul>
<li class="fragment">Track eye movements to control a computer cursor or other devices.</li>
<li class="fragment">Enables hands-free interaction for individuals with limited mobility.</li>
<li class="fragment"><a href="https://us.tobiidynavox.com/pages/what-is-eye-tracking">Tobii Dynavox - Eye Tracking</a></li>
</ul>
</section>
<section id="voice-control-software" class="slide level2">
<h2>Voice Control Software</h2>
<ul>
<li class="fragment">Allows users to control computers and devices using voice commands.</li>
<li class="fragment">Examples: Dragon NaturallySpeaking, Siri, Google Assistant, Alexa</li>
<li class="fragment"><a href="https://shop.nuance.com/store/nuanceus/en_US/cat/categorySkuCatalog/CategoryID.69439800">Nuance - Dragon Professional</a></li>
</ul>
</section></section>
<section>
<section id="assistive-technologies-for-cognitive-speech-impairments" class="title-slide slide level1 center">
<h1>Assistive Technologies for Cognitive &amp; Speech Impairments</h1>

</section>
<section id="text-to-speech-tts" class="slide level2">
<h2>Text-to-Speech (TTS)</h2>
<ul>
<li class="fragment">Synthesizes spoken words from digital text.</li>
<li class="fragment">Benefits individuals with reading difficulties or speech impairments.</li>
<li class="fragment">Often integrated into screen readers and other applications.</li>
<li class="fragment"><a href="https://www.readspeaker.com/">ReadSpeaker - Text to Speech Solutions</a></li>
</ul>
</section>
<section id="reading-aids" class="slide level2">
<h2>Reading Aids</h2>
<ul>
<li class="fragment">Tools to support reading comprehension and fluency.</li>
<li class="fragment">Examples: dyslexia fonts, text highlighting, line readers, optical character recognition (OCR).</li>
</ul>
</section>
<section id="memory-aids" class="slide level2">
<h2>Memory Aids</h2>
<ul>
<li class="fragment">Devices and software to assist with memory and organization.</li>
<li class="fragment">Examples: Reminder apps, digital calendars, note-taking software, voice recorders.</li>
</ul>
</section></section>
<section>
<section id="testing-with-assistive-technologies" class="title-slide slide level1 center">
<h1>Testing with Assistive Technologies</h1>

</section>
<section id="why-test-with-at" class="slide level2">
<h2>Why Test with AT?</h2>
<ul>
<li class="fragment">Ensures real-world accessibility for users who rely on these tools.</li>
<li class="fragment">Identifies usability issues that may not be apparent through other testing methods.</li>
<li class="fragment">Validates conformance with accessibility standards.</li>
</ul>
</section>
<section id="testing-methods" class="slide level2">
<h2>Testing Methods</h2>
<ul>
<li class="fragment"><strong>Manual Testing:</strong> Involving users with disabilities who use AT to test the ICT.</li>
<li class="fragment"><strong>Automated Testing:</strong> Tools can check for some types of AT compatibility issues, but manual testing is crucial.</li>
<li class="fragment"><strong>Usability Testing:</strong> Observe users with disabilities using AT to complete tasks within the ICT.</li>
</ul>
</section>
<section id="common-at-for-testing" class="slide level2">
<h2>Common AT for Testing</h2>
<ul>
<li class="fragment"><strong>Screen Readers:</strong> NVDA, JAWS (common for web accessibility testing)</li>
<li class="fragment"><strong>Magnification Software:</strong> Built-in OS magnifiers</li>
<li class="fragment"><strong>Keyboard-only Navigation:</strong> Testing without a mouse</li>
<li class="fragment"><strong>Voice Control:</strong> Operating systems’ built-in voice control features</li>
</ul>
</section></section>
<section>
<section id="at-related-legislation" class="title-slide slide level1 center">
<h1>AT Related Legislation</h1>

</section>
<section id="examples-of-legislation" class="slide level2">
<h2>Examples of Legislation</h2>
<ul>
<li class="fragment"><strong>Americans with Disabilities Act (ADA) (USA):</strong> Mandates accessibility in various areas, including ICT in some contexts.
<ul>
<li class="fragment"><a href="https://www.ada.gov/">ADA.gov</a></li>
</ul></li>
<li class="fragment"><strong>Section 508 of the Rehabilitation Act (USA):</strong> Requires federal agencies to make their ICT accessible.
<ul>
<li class="fragment"><a href="https://www.section508.gov/">Section508.gov</a></li>
</ul></li>
<li class="fragment"><strong>Accessibility for Ontarians with Disabilities Act (AODA) (Canada):</strong> Provincial legislation with ICT accessibility standards.
<ul>
<li class="fragment"><a href="https://www.ontario.ca/page/accessibility-laws">Ontario.ca - Accessibility Laws</a></li>
</ul></li>
<li class="fragment"><strong>European Accessibility Act (EAA) (EU):</strong> Sets accessibility requirements for a range of products and services, including ICT.
<ul>
<li class="fragment"><a href="https://ec.europa.eu/social/main.jsp?catId=1202">European Commission - European Accessibility Act</a></li>
</ul></li>
</ul>
</section>
<section id="importance-of-legislation" class="slide level2">
<h2>Importance of Legislation</h2>
<ul>
<li class="fragment">Provides legal frameworks to ensure accessibility.</li>
<li class="fragment">Drives development and procurement of accessible ICT and AT.</li>
<li class="fragment">Promotes inclusivity and equal access for people with disabilities.</li>
</ul>
</section>
<section id="further-resources" class="slide level2">
<h2>Further Resources</h2>
<ul>
<li class="fragment"><strong>Web Accessibility Initiative (WAI):</strong> <a href="https://www.w3.org/WAI/">https://www.w3.org/WAI/</a></li>
<li class="fragment"><strong>Assistive Technology Industry Association (ATIA):</strong> <a href="https://www.atia.org/">https://www.atia.org/</a></li>
</ul>

</section></section>
    </div>
  <div class="quarto-auto-generated-content" style="display: none;">
<div class="footer footer-default">

</div>
</div></div>

  <script>window.backupDefine = window.define; window.define = undefined;</script>
  <script src="index_files/libs/revealjs/dist/reveal.js"></script>
  <!-- reveal.js plugins -->
  <script src="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.js"></script>
  <script src="index_files/libs/revealjs/plugin/pdf-export/pdfexport.js"></script>
  <script src="index_files/libs/revealjs/plugin/reveal-menu/menu.js"></script>
  <script src="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.js"></script>
  <script src="index_files/libs/revealjs/plugin/quarto-tone/tone.js"></script>
  <script src="index_files/libs/revealjs/plugin/multiplex/socket.io.js"></script>
  <script src="index_files/libs/revealjs/plugin/multiplex/multiplex.js"></script>
  <script src="index_files/libs/revealjs/plugin/reveal-speech/speech.js"></script>
  <script src="index_files/libs/revealjs/plugin/quarto-support/support.js"></script>
  

  <script src="index_files/libs/revealjs/plugin/notes/notes.js"></script>
  <script src="index_files/libs/revealjs/plugin/search/search.js"></script>
  <script src="index_files/libs/revealjs/plugin/zoom/zoom.js"></script>
  <script src="index_files/libs/revealjs/plugin/math/math.js"></script>
  <script>window.define = window.backupDefine; window.backupDefine = undefined;</script>

  <script>

      // Full list of configuration options available at:
      // https://revealjs.com/config/
      Reveal.initialize({
'controlsAuto': true,
'previewLinksAuto': false,
'pdfSeparateFragments': false,
'autoAnimateEasing': "ease",
'autoAnimateDuration': 1,
'autoAnimateUnmatched': true,
'jumpToSlide': true,
'menu': {"side":"left","useTextContentForMissingTitles":true,"markers":false,"loadIcons":false,"custom":[{"title":"Tools","icon":"<i class=\"fas fa-gear\"></i>","content":"<ul class=\"slide-menu-items\">\n<li class=\"slide-tool-item active\" data-item=\"0\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.fullscreen(event)\"><kbd>f</kbd> Fullscreen</a></li>\n<li class=\"slide-tool-item\" data-item=\"1\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.speakerMode(event)\"><kbd>s</kbd> Speaker View</a></li>\n<li class=\"slide-tool-item\" data-item=\"2\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.overview(event)\"><kbd>o</kbd> Slide Overview</a></li>\n<li class=\"slide-tool-item\" data-item=\"3\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.togglePdfExport(event)\"><kbd>e</kbd> PDF Export Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"4\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.toggleScrollView(event)\"><kbd>r</kbd> Scroll View Mode</a></li>\n<li class=\"slide-tool-item\" data-item=\"5\"><a href=\"#\" onclick=\"RevealMenuToolHandlers.keyboardHelp(event)\"><kbd>?</kbd> Keyboard Help</a></li>\n</ul>"}],"openButton":true},
'multiplex': {"secret":null,"id":"1d598c6a5bd02ede","url":"https://reveal-multiplex.glitch.me/"},
'speech': {"nextKeyword":"gotonext","prevKeyword":"gotoprevious","lastKeyword":"lastslide","firstKeyword":"firstslide","numberKeyword":"gotoslidenumber"},
'smaller': false,
 
        // Display controls in the bottom right corner
        controls: false,

        // Help the user learn the controls by providing hints, for example by
        // bouncing the down arrow when they first encounter a vertical slide
        controlsTutorial: false,

        // Determines where controls appear, "edges" or "bottom-right"
        controlsLayout: 'edges',

        // Visibility rule for backwards navigation arrows; "faded", "hidden"
        // or "visible"
        controlsBackArrows: 'faded',

        // Display a presentation progress bar
        progress: true,

        // Display the page number of the current slide
        slideNumber: false,

        // 'all', 'print', or 'speaker'
        showSlideNumber: 'all',

        // Add the current slide number to the URL hash so that reloading the
        // page/copying the URL will return you to the same slide
        hash: true,

        // Start with 1 for the hash rather than 0
        hashOneBasedIndex: false,

        // Flags if we should monitor the hash and change slides accordingly
        respondToHashChanges: true,

        // Push each slide change to the browser history
        history: true,

        // Enable keyboard shortcuts for navigation
        keyboard: true,

        // Enable the slide overview mode
        overview: true,

        // Disables the default reveal.js slide layout (scaling and centering)
        // so that you can use custom CSS layout
        disableLayout: false,

        // Vertical centering of slides
        center: false,

        // Enables touch navigation on devices with touch input
        touch: true,

        // Loop the presentation
        loop: false,

        // Change the presentation direction to be RTL
        rtl: false,

        // see https://revealjs.com/vertical-slides/#navigation-mode
        navigationMode: 'linear',

        // Randomizes the order of slides each time the presentation loads
        shuffle: false,

        // Turns fragments on and off globally
        fragments: true,

        // Flags whether to include the current fragment in the URL,
        // so that reloading brings you to the same fragment position
        fragmentInURL: false,

        // Flags if the presentation is running in an embedded mode,
        // i.e. contained within a limited portion of the screen
        embedded: false,

        // Flags if we should show a help overlay when the questionmark
        // key is pressed
        help: true,

        // Flags if it should be possible to pause the presentation (blackout)
        pause: true,

        // Flags if speaker notes should be visible to all viewers
        showNotes: false,

        // Global override for autoplaying embedded media (null/true/false)
        autoPlayMedia: null,

        // Global override for preloading lazy-loaded iframes (null/true/false)
        preloadIframes: null,

        // Number of milliseconds between automatically proceeding to the
        // next slide, disabled when set to 0, this value can be overwritten
        // by using a data-autoslide attribute on your slides
        autoSlide: 0,

        // Stop auto-sliding after user input
        autoSlideStoppable: true,

        // Use this method for navigation when auto-sliding
        autoSlideMethod: null,

        // Specify the average time in seconds that you think you will spend
        // presenting each slide. This is used to show a pacing timer in the
        // speaker view
        defaultTiming: null,

        // Enable slide navigation via mouse wheel
        mouseWheel: false,

        // The display mode that will be used to show slides
        display: 'block',

        // Hide cursor if inactive
        hideInactiveCursor: true,

        // Time before the cursor is hidden (in ms)
        hideCursorTime: 5000,

        // Opens links in an iframe preview overlay
        previewLinks: false,

        // Transition style (none/fade/slide/convex/concave/zoom)
        transition: 'none',

        // Transition speed (default/fast/slow)
        transitionSpeed: 'default',

        // Transition style for full page slide backgrounds
        // (none/fade/slide/convex/concave/zoom)
        backgroundTransition: 'none',

        // Number of slides away from the current that are visible
        viewDistance: 3,

        // Number of slides away from the current that are visible on mobile
        // devices. It is advisable to set this to a lower number than
        // viewDistance in order to save resources.
        mobileViewDistance: 2,

        // The "normal" size of the presentation, aspect ratio will be preserved
        // when the presentation is scaled to fit different resolutions. Can be
        // specified using percentage units.
        width: 1050,

        height: 700,

        // Factor of the display size that should remain empty around the content
        margin: 0.1,

        math: {
          mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js',
          config: 'TeX-AMS_HTML-full',
          tex2jax: {
            inlineMath: [['\\(','\\)']],
            displayMath: [['\\[','\\]']],
            balanceBraces: true,
            processEscapes: false,
            processRefs: true,
            processEnvironments: true,
            preview: 'TeX',
            skipTags: ['script','noscript','style','textarea','pre','code'],
            ignoreClass: 'tex2jax_ignore',
            processClass: 'tex2jax_process'
          },
        },

        // reveal.js plugins
        plugins: [QuartoLineHighlight, PdfExport, RevealMenu, QuartoTone, RevealSpeech, QuartoSupport,

          RevealMath,
          
          RevealSearch,
          RevealZoom
        ]
      });
    </script>
    <script id="quarto-html-after-body" type="application/javascript">
    window.document.addEventListener("DOMContentLoaded", function (event) {
      const toggleBodyColorMode = (bsSheetEl) => {
        const mode = bsSheetEl.getAttribute("data-mode");
        const bodyEl = window.document.querySelector("body");
        if (mode === "dark") {
          bodyEl.classList.add("quarto-dark");
          bodyEl.classList.remove("quarto-light");
        } else {
          bodyEl.classList.add("quarto-light");
          bodyEl.classList.remove("quarto-dark");
        }
      }
      const toggleBodyColorPrimary = () => {
        const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
        if (bsSheetEl) {
          toggleBodyColorMode(bsSheetEl);
        }
      }
      toggleBodyColorPrimary();  
      const tabsets =  window.document.querySelectorAll(".panel-tabset-tabby")
      tabsets.forEach(function(tabset) {
        const tabby = new Tabby('#' + tabset.id);
      });
      const isCodeAnnotation = (el) => {
        for (const clz of el.classList) {
          if (clz.startsWith('code-annotation-')) {                     
            return true;
          }
        }
        return false;
      }
      const onCopySuccess = function(e) {
        // button target
        const button = e.trigger;
        // don't keep focus
        button.blur();
        // flash "checked"
        button.classList.add('code-copy-button-checked');
        var currentTitle = button.getAttribute("title");
        button.setAttribute("title", "Copied!");
        let tooltip;
        if (window.bootstrap) {
          button.setAttribute("data-bs-toggle", "tooltip");
          button.setAttribute("data-bs-placement", "left");
          button.setAttribute("data-bs-title", "Copied!");
          tooltip = new bootstrap.Tooltip(button, 
            { trigger: "manual", 
              customClass: "code-copy-button-tooltip",
              offset: [0, -8]});
          tooltip.show();    
        }
        setTimeout(function() {
          if (tooltip) {
            tooltip.hide();
            button.removeAttribute("data-bs-title");
            button.removeAttribute("data-bs-toggle");
            button.removeAttribute("data-bs-placement");
          }
          button.setAttribute("title", currentTitle);
          button.classList.remove('code-copy-button-checked');
        }, 1000);
        // clear code selection
        e.clearSelection();
      }
      const getTextToCopy = function(trigger) {
          const codeEl = trigger.previousElementSibling.cloneNode(true);
          for (const childEl of codeEl.children) {
            if (isCodeAnnotation(childEl)) {
              childEl.remove();
            }
          }
          return codeEl.innerText;
      }
      const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
        text: getTextToCopy
      });
      clipboard.on('success', onCopySuccess);
      if (window.document.getElementById('quarto-embedded-source-code-modal')) {
        const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
          text: getTextToCopy,
          container: window.document.getElementById('quarto-embedded-source-code-modal')
        });
        clipboardModal.on('success', onCopySuccess);
      }
        var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
        var mailtoRegex = new RegExp(/^mailto:/);
          var filterRegex = new RegExp('/' + window.location.host + '/');
        var isInternal = (href) => {
            return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
        }
        // Inspect non-navigation links and adorn them if external
     	var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
        for (var i=0; i<links.length; i++) {
          const link = links[i];
          if (!isInternal(link.href)) {
            // undo the damage that might have been done by quarto-nav.js in the case of
            // links that we want to consider external
            if (link.dataset.originalHref !== undefined) {
              link.href = link.dataset.originalHref;
            }
          }
        }
      function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
        const config = {
          allowHTML: true,
          maxWidth: 500,
          delay: 100,
          arrow: false,
          appendTo: function(el) {
              return el.closest('section.slide') || el.parentElement;
          },
          interactive: true,
          interactiveBorder: 10,
          theme: 'light-border',
          placement: 'bottom-start',
        };
        if (contentFn) {
          config.content = contentFn;
        }
        if (onTriggerFn) {
          config.onTrigger = onTriggerFn;
        }
        if (onUntriggerFn) {
          config.onUntrigger = onUntriggerFn;
        }
          config['offset'] = [0,0];
          config['maxWidth'] = 700;
        window.tippy(el, config); 
      }
      const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
      for (var i=0; i<noterefs.length; i++) {
        const ref = noterefs[i];
        tippyHover(ref, function() {
          // use id or data attribute instead here
          let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
          try { href = new URL(href).hash; } catch {}
          const id = href.replace(/^#\/?/, "");
          const note = window.document.getElementById(id);
          if (note) {
            return note.innerHTML;
          } else {
            return "";
          }
        });
      }
      const findCites = (el) => {
        const parentEl = el.parentElement;
        if (parentEl) {
          const cites = parentEl.dataset.cites;
          if (cites) {
            return {
              el,
              cites: cites.split(' ')
            };
          } else {
            return findCites(el.parentElement)
          }
        } else {
          return undefined;
        }
      };
      var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
      for (var i=0; i<bibliorefs.length; i++) {
        const ref = bibliorefs[i];
        const citeInfo = findCites(ref);
        if (citeInfo) {
          tippyHover(citeInfo.el, function() {
            var popup = window.document.createElement('div');
            citeInfo.cites.forEach(function(cite) {
              var citeDiv = window.document.createElement('div');
              citeDiv.classList.add('hanging-indent');
              citeDiv.classList.add('csl-entry');
              var biblioDiv = window.document.getElementById('ref-' + cite);
              if (biblioDiv) {
                citeDiv.innerHTML = biblioDiv.innerHTML;
              }
              popup.appendChild(citeDiv);
            });
            return popup.innerHTML;
          });
        }
      }
    });
    </script>
    

</body></html>