<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#000000">
<meta name="description" content="ACE — Audiology Clinical & Educational Tools. Explore interactive audiology resources for clinical practice, education, and research from Purdue University's EAR Lab.">
<title>ACE | Audiology Clinical & Educational Tools | Purdue EAR Lab</title>
<style>
/*
ACE — Audiology Clinical & Educational Tools
One-file static site. No dependencies, third-party assets, or build process.
Colors: Purdue Boilermaker Gold #CFB991, Black #000000, Steel #555960.
*/
:root {
--ink: #000000;
--charcoal: #171717;
--gold: #cfb991;
--gold-dark: #71532b;
--steel: #555960;
--paper: #f8f7f3;
--white: #ffffff;
--line: #e2ded5;
--subtle: #eeeae1;
--font-display: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
--font-body: "Franklin Gothic Book", "Segoe UI", Arial, sans-serif;
--max-width: 1152px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--charcoal); background: var(--paper); font-family: var(--font-body); line-height: 1.58; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #956a22; outline-offset: 4px; }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: min(calc(100% - 3rem), var(--max-width)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 100; left: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--gold); color: #000; font-weight: 800; border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
/* Header & typographic ACE identity — not an official Purdue wordmark */
.site-header { background: var(--ink); color: #fff; position: relative; overflow: clip; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--gold); }
.masthead { border-bottom: 1px solid rgba(255,255,255,.2); }
.masthead-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-identifier { text-decoration: none; display: inline-flex; align-items: center; gap: .8rem; min-width: 0; }
.site-identifier .logo-type { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 auto; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-display); font-size: 1.32rem; font-weight: 800; letter-spacing: -.05em; }
.site-identifier .logo-label { display: flex; flex-direction: column; line-height: 1.34; }
.site-identifier .logo-label strong { color: #fff; font-size: .84rem; letter-spacing: .05em; font-weight: 750; text-transform: uppercase; }
.site-identifier .logo-label span { color: #d6d2ca; font-size: .76rem; }
.top-navigation { display: flex; align-items: center; gap: .35rem; }
.top-navigation a { padding: .7rem .85rem; text-decoration: none; border-radius: 4px; font-size: .86rem; font-weight: 700; white-space: nowrap; color: #efeee9; }
.top-navigation a:hover { color: #000; background: var(--gold); }
.top-navigation .ear-lab-link { color: var(--gold); border: 1px solid rgba(207,185,145,.48); }
.top-navigation .ear-lab-link:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.hero { padding: clamp(4rem, 7.4vw, 6.8rem) 0 clamp(5.1rem, 8.5vw, 8.2rem); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hero-kicker { margin: 0 0 1.55rem; color: var(--gold); display: flex; align-items: center; gap: .75rem; font-size: .79rem; font-weight: 800; letter-spacing: .155em; text-transform: uppercase; }
.hero-kicker::before { content: ""; display: inline-block; width: 33px; height: 2px; background: var(--gold); }
.hero h1 { margin: 0; letter-spacing: -.052em; line-height: .98; font-family: var(--font-display); font-weight: 800; }
.hero h1 .ace { display: block; font-size: clamp(6.1rem, 13.4vw, 11.5rem); color: var(--gold); letter-spacing: -.065em; }
.hero h1 .expanded { display: block; margin-top: .3rem; font-size: clamp(2.1rem, 4.5vw, 3.8rem); max-width: 16ch; line-height: 1.09; letter-spacing: -.038em; }
.hero h1 .expanded .amp { color: var(--gold); }
.hero-tagline { color: #e2ded7; font-size: clamp(1.02rem, 1.45vw, 1.22rem); max-width: 42ch; margin: 1.55rem 0 0; line-height: 1.6; }
.hero-action { display: inline-flex; gap: .65rem; align-items: center; margin-top: 1.9rem; padding: .78rem 0; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); font-weight: 800; font-size: .92rem; }
.hero-action:hover { color: #fff; border-color: #fff; }
.hero-action svg { width: 19px; height: 19px; flex: none; }
.hero-graphic { min-width: 0; align-self: stretch; display: flex; justify-content: center; align-items: center; }
.signal-card { width: 100%; max-width: 392px; padding: 1.15rem; background: #101010; border: 1px solid #40392a; box-shadow: 16px 16px 0 rgba(207, 185, 145, .085); }
.signal-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--gold); font-weight: 800; font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; margin: .28rem .25rem .7rem; }
.signal-card-top .mini-mark { display: inline-flex; align-items: center; gap: .3rem; }
.signal-card-top .mini-mark::before { content: ""; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.signal-chart { display: block; width: 100%; height: auto; }
.signal-summary { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #454039; padding-top: 1.1rem; margin-top: .65rem; }
.signal-stat { padding: .1rem .6rem; }
.signal-stat + .signal-stat { border-left: 1px solid #454039; padding-left: 1.35rem; }
.signal-stat b { display: block; color: #fff; font-size: 1.85rem; letter-spacing: -.05em; line-height: 1; font-family: var(--font-display); }
.signal-stat small { display: block; color: #bdb5a8; margin-top: .33rem; letter-spacing: .10em; text-transform: uppercase; font-weight: 700; font-size: .67rem; }
/* Simple category links remain usable with JavaScript disabled. */
.jump-panel { position: relative; z-index: 1; margin-top: -2.8rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.08); border-radius: 13px; padding: 1.45rem 1.55rem; display: grid; grid-template-columns: minmax(195px, .74fr) minmax(0, 1.6fr); gap: 1.45rem; align-items: center; }
.jump-intro .jump-eyebrow { margin: 0 0 .2rem; font-weight: 800; color: var(--gold-dark); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
.jump-intro p:last-child { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -.025em; }
.jump-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.jump-links a { background: var(--paper); border: 1px solid #ded9cf; border-radius: 8px; min-height: 89px; padding: 1rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .65rem; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.jump-links a:hover { background: #f2ebdc; border-color: #9b7c51; transform: translateY(-2px); }
.jump-links a span { display: block; min-width: 0; }
.jump-links a small { display: block; font-size: .72rem; letter-spacing: .08em; color: var(--steel); text-transform: uppercase; margin-bottom: .2rem; font-weight: 750; }
.jump-links a strong { display: block; font-size: .96rem; line-height: 1.26; font-weight: 800; }
.jump-links a svg { width: 19px; height: 19px; flex: 0 0 auto; }
main { padding: clamp(4rem, 6vw, 5.6rem) 0 clamp(5rem, 8vw, 7rem); }
.collection-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; margin-bottom: 3.65rem; border-bottom: 1px solid #d4cec3; }
.small-eyebrow { margin: 0 0 .35rem; color: var(--gold-dark); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: .73rem; }
.collection-summary { margin: 0; font-family: var(--font-display); font-size: clamp(1.55rem, 2.4vw, 2.2rem); max-width: 22ch; font-weight: 800; line-height: 1.19; letter-spacing: -.037em; }
.external-link-note { margin: .75rem 0 0; font-size: .83rem; color: var(--steel); }
.search-panel { width: min(100%, 340px); flex: 0 0 auto; }
.search-panel label { display: block; margin-bottom: .38rem; font-weight: 750; font-size: .8rem; }
.search-input-wrap { display: flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid #b8b2a9; border-radius: 8px; padding: 0 .75rem; }
.search-input-wrap:focus-within { outline: 3px solid #956a22; outline-offset: 3px; }
.search-input-wrap svg { width: 17px; height: 17px; flex: none; color: var(--steel); }
.search-input-wrap input { min-width: 0; flex: 1; color: #171717; border: 0; outline: none; height: 46px; width: 100%; font-size: .93rem; background: transparent; }
.search-input-wrap input:focus-visible { outline: 0; }
.search-count { color: var(--steel); font-size: .78rem; margin: .38rem 0 0; min-height: 1.4em; }
.tool-section { scroll-margin-top: 1.5rem; }
.tool-section + .tool-section { margin-top: clamp(4.4rem, 7.5vw, 6.5rem); }
.section-header { display: flex; gap: 1.3rem; align-items: start; justify-content: space-between; padding-bottom: 1.4rem; margin-bottom: 1.65rem; border-bottom: 2px solid var(--ink); }
.section-kicker { margin: 0 0 .3rem; font-weight: 800; font-size: .74rem; color: var(--gold-dark); letter-spacing: .14em; text-transform: uppercase; }
.section-header h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.65rem); line-height: 1.13; letter-spacing: -.035em; font-weight: 800; }
.section-header p.section-description { margin: .6rem 0 0; max-width: 60ch; color: var(--steel); font-size: .95rem; }
.section-counter { white-space: nowrap; border-radius: 999px; border: 1px solid #d6c6a7; color: #513d21; font-size: .78rem; font-weight: 800; padding: .42rem .8rem; background: #f5edde; margin-top: .3rem; }
/* Tool cards: visual styling, independent of content and JavaScript. */
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.12rem; }
.tool-card { background: var(--white); border: 1px solid #dedbd3; border-top: 3px solid #cfb991; border-radius: 11px; padding: clamp(1.3rem, 2.45vw, 2rem); display: flex; flex-direction: column; min-width: 0; box-shadow: 0 3px 11px rgba(0,0,0,.025); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.085); border-color: #c4b49a; }
.card-utility { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.25rem; }
.card-category { color: #635337; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.card-number { color: #76736d; font-family: var(--font-display); font-size: .9rem; font-weight: 750; letter-spacing: .03em; }
.tool-card h3 { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(1.34rem, 2vw, 1.65rem); line-height: 1.25; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.tool-card h3 a { text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tool-card h3 a:hover, .tool-card h3 a:focus-visible { text-decoration-color: var(--gold-dark); }
.tool-card p { color: #474a4d; font-size: .947rem; margin: 0 0 1.65rem; line-height: 1.67; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid #e7e2d9; }
.open-tool { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .2rem .6rem 0; min-height: 44px; font-size: .87rem; font-weight: 850; text-decoration: none; }
.open-tool:hover { color: #71532b; }
.open-tool svg { height: 26px; width: 26px; padding: 5px; background: var(--ink); color: var(--gold); border-radius: 50%; transition: background .16s ease, color .16s ease; }
.open-tool:hover svg { background: #5c4525; color: #fff; }
.empty-section { margin: 1.35rem 0 0; padding: 1.25rem 1.5rem; border: 1px dashed #b1a99b; background: #fff; color: var(--steel); border-radius: 9px; }
.site-footer { background: var(--ink); color: #fff; border-top: 5px solid var(--gold); padding: 2.7rem 0 2.4rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.footer-mark { color: var(--gold); font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.06em; margin: 0 0 .5rem; }
.footer-name { font-weight: 850; font-size: .97rem; margin: 0; }
.footer-affiliation { color: #c4beb4; margin: .5rem 0 0; font-size: .82rem; max-width: 64ch; }
.footer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.footer-lab-link { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; padding: .8rem 1rem; background: var(--gold); color: #000; border: 1px solid var(--gold); border-radius: 7px; text-decoration: none; font-size: .83rem; font-weight: 800; }
.footer-lab-link:hover { background: #f0dfbd; border-color: #f0dfbd; }
.footer-lab-link svg { width: 16px; height: 16px; }
.back-to-top { display: inline-flex; align-items: center; gap: .65rem; flex: 0 0 auto; padding: .8rem 1rem; color: var(--gold); border: 1px solid #6d6251; border-radius: 7px; text-decoration: none; font-size: .83rem; font-weight: 800; }
.back-to-top:hover { background: var(--gold); color: #000; }
.back-to-top svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
.hero-inner { grid-template-columns: minmax(0, 1fr) minmax(220px, .68fr); gap: 2.1rem; }
.signal-card { padding: .8rem; }
.hero h1 .ace { font-size: clamp(5.8rem, 14vw, 9rem); }
.hero h1 .expanded { font-size: clamp(2rem, 4.7vw, 3rem); }
.jump-panel { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 690px) {
.container { width: min(calc(100% - 2rem), var(--max-width)); }
.masthead-inner { align-items: start; flex-direction: column; gap: .65rem; padding: 1rem 0 .9rem; }
.top-navigation { margin-left: -.5rem; flex-wrap: wrap; }
.top-navigation a { padding: .48rem .5rem; }
.hero { padding: 3.6rem 0 5.3rem; }
.hero-inner { grid-template-columns: 1fr; }
.hero-graphic { display: none; }
.hero h1 .ace { font-size: clamp(6.3rem, 24vw, 10rem); }
.hero h1 .expanded { font-size: clamp(2rem, 8vw, 3.4rem); }
.jump-panel { margin-top: -2.1rem; padding: 1.25rem; }
.collection-heading { flex-direction: column; align-items: stretch; gap: 1.2rem; margin-bottom: 3rem; }
.search-panel { width: 100%; }
.tool-grid { grid-template-columns: 1fr; }
.tool-card h3 { font-size: 1.52rem; }
.section-header { gap: .6rem; }
.footer-inner { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
}
@media (max-width: 400px) {
.jump-links { grid-template-columns: 1fr; }
.jump-links a { min-height: 70px; padding: .82rem .95rem; }
.section-header { flex-direction: column; }
.section-counter { margin-top: .25rem; }
.tool-card { padding: 1.25rem; }
.hero h1 .ace { font-size: clamp(6rem, 25vw, 7.7rem); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
</style>
</head>
<body id="top">
<a class="skip-link" href="#main">Skip to main content</a>
<header class="site-header">
<div class="masthead">
<div class="container masthead-inner">
<a class="site-identifier" href="#top" aria-label="ACE — return to top">
<span class="logo-type" aria-hidden="true">A</span>
<span class="logo-label"><strong>ACE Collection</strong><span>Purdue University · EAR Lab</span></span>
</a>
<nav class="top-navigation" aria-label="Main navigation">
<a href="#diagnostics">Audiology Diagnostics</a>
<a href="#hearing-aids">Hearing Aids</a>
<a class="ear-lab-link" href="https://hhs.purdue.edu/ear-lab/" target="_blank" rel="noopener noreferrer">Purdue EAR Lab<span class="sr-only"> (opens in a new tab)</span></a>
</nav>
</div>
</div>
<div class="container hero">
<div class="hero-inner">
<div class="hero-copy">
<p class="hero-kicker">Experimental Amplification Research Lab</p>
<h1><span class="ace">ACE</span><span class="expanded">Audiology Clinical <span class="amp">&</span> Educational Tools</span></h1>
<p class="hero-tagline">Interactive tools for audiology clinical practice, education, and research.</p>
<a class="hero-action" href="#browse">Explore the tools
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16M5 13l7 7 7-7"/></svg>
</a>
</div>
<div class="hero-graphic" aria-hidden="true">
<div class="signal-card">
<div class="signal-card-top"><span>THE ACE COLLECTION</span><span class="mini-mark">EAR LAB</span></div>
<!-- Abstract audiology-inspired linework, not real patient measurements. -->
<svg class="signal-chart" viewBox="0 0 360 264" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="360" height="264" fill="#171717"/>
<g stroke="#35332e" stroke-width="1">
<path d="M32 25V239M82 25V239M132 25V239M182 25V239M232 25V239M282 25V239M332 25V239"/>
<path d="M25 38H335M25 82H335M25 126H335M25 170H335M25 214H335"/>
</g>
<path d="M27 165C52 165 58 114 80 114C103 114 110 198 132 198C152 198 159 54 181 54C207 54 210 145 231 145C253 145 261 92 283 92C302 92 311 153 332 153" stroke="#CFB991" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27 165C52 165 58 114 80 114C103 114 110 198 132 198C152 198 159 54 181 54C207 54 210 145 231 145C253 145 261 92 283 92C302 92 311 153 332 153" stroke="#CFB991" stroke-opacity=".14" stroke-width="14" stroke-linecap="round"/>
<g fill="#171717" stroke="#CFB991" stroke-width="3"><circle cx="80" cy="114" r="6"/><circle cx="132" cy="198" r="6"/><circle cx="181" cy="54" r="6"/><circle cx="231" cy="145" r="6"/><circle cx="283" cy="92" r="6"/></g>
<g fill="#7f786c" font-size="9" font-family="Arial, sans-serif" letter-spacing="1"><text x="27" y="251">LOW</text><text x="308" y="251">HIGH</text></g>
</svg>
<div class="signal-summary">
<div class="signal-stat"><b>08</b><small>Interactive tools</small></div>
<div class="signal-stat"><b>02</b><small>Categories</small></div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="jump-panel" aria-label="Browse tool categories">
<div class="jump-intro"><p class="jump-eyebrow">Find your resource</p><p>Explore by category</p></div>
<div class="jump-links">
<a href="#diagnostics"><span><small>01 · 3 tools</small><strong>Audiology Diagnostics</strong></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
<a href="#hearing-aids"><span><small>02 · 5 tools</small><strong>Hearing Aids</strong></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg></a>
</div>
</nav>
</div>
<main id="main" class="container">
<!-- ============================================================
ACE TOOL DIRECTORY — MAINTENANCE GUIDE
All resources below are ordinary HTML cards, not JS-generated.
ADD A TOOL:
1. Copy an <article class="tool-card"> inside the desired .tool-grid.
2. Change its h3 title, description, number, and BOTH URL links.
Keep target="_blank" and rel="noopener noreferrer" on external links.
3. Update the corresponding section-counter and jump-link count.
4. Update the hero total (08) for accuracy.
ADD A CATEGORY:
1. Copy a complete <section class="tool-section"> (including its
unique id, section header, .tool-grid, and empty-search note).
2. Give it a new unique section id and grid id; update
data-empty-for to match the new grid id.
3. Add a category jump link and update the header navigation.
4. Update the hero category total (02).
The optional search automatically indexes newly added .tool-card
elements. In a standalone page, section links work without JS.
If embedded via iframe/srcdoc, JavaScript must be allowed for
in-document navigation to avoid reloading the host page.
Use ace_purdue_embed_snippet.html to eliminate nested scrollbars.
============================================================ -->
<div class="collection-heading" id="browse">
<div><p class="small-eyebrow">The tool directory</p><p class="collection-summary">Explore. Learn. Apply.</p><p class="external-link-note">Tool links and Purdue EAR Lab links open in a new tab.</p></div>
<!-- Progressive enhancement: this control is shown only when JavaScript loads. -->
<div class="search-panel" id="search-panel" hidden>
<label for="tool-search">Search this collection</label>
<div class="search-input-wrap">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m16 16 5 5"/></svg>
<input id="tool-search" type="search" placeholder="Search tools or topics…" autocomplete="off" aria-controls="diagnostic-grid hearing-aids-grid">
</div>
<p class="search-count" id="search-status" role="status" aria-live="polite" aria-atomic="true">Showing all 8 tools</p>
</div>
</div>
<!-- ================== TOOL DIRECTORY: SECTION 1 ================== -->
<section class="tool-section" id="diagnostics" aria-labelledby="diagnostics-title">
<div class="section-header">
<div>
<p class="section-kicker">01 / Audiology assessment</p>
<h2 id="diagnostics-title">Audiology Diagnostics</h2>
<p class="section-description">Tools for creating audiograms and building diagnostic interpretation skills.</p>
</div>
<span class="section-counter">3 tools</span>
</div>
<div class="tool-grid" id="diagnostic-grid">
<article class="tool-card">
<div class="card-utility"><span class="card-category">Audiology Diagnostics</span><span class="card-number" aria-hidden="true">01</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/audiogram_tool/" target="_blank" rel="noopener noreferrer">Audiogram Tool<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>An interactive tool for creating, editing, comparing, and exporting professional-quality pure-tone audiograms, including standard and extended high-frequency thresholds. Supports conventional audiometric symbols, multiple test sessions, and customizable image and PDF exports suitable for clinical documentation, teaching materials, presentations, and publications.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/audiogram_tool/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— Audiogram Tool</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
<article class="tool-card">
<div class="card-utility"><span class="card-category">Audiology Diagnostics</span><span class="card-number" aria-hidden="true">02</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/masking_trainer/" target="_blank" rel="noopener noreferrer">Audiometric Masking Decision Trainer<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>An interactive training simulator that helps audiology students determine when masking is required, calculate appropriate masking levels, and apply the plateau method during air- and bone-conduction testing. Multiple clinical scenarios, practice modes, individualized feedback, and progress tracking support teaching and competency development.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/masking_trainer/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— Audiometric Masking Decision Trainer</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
<article class="tool-card">
<div class="card-utility"><span class="card-category">Audiology Diagnostics</span><span class="card-number" aria-hidden="true">03</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/acoustic_reflex_patterns_tool/" target="_blank" rel="noopener noreferrer">Acoustic Reflex Patterns Tool<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>An interactive learning tool for interpreting ipsilateral and contralateral acoustic reflex patterns associated with different auditory disorders. Two complementary practice modes allow learners to predict patterns from suspected etiologies or identify compatible etiologies from observed patterns, with feedback and performance tracking.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/acoustic_reflex_patterns_tool/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— Acoustic Reflex Patterns Tool</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
</div>
<p class="empty-section" data-empty-for="diagnostic-grid" hidden>No diagnostic tools match your search.</p>
</section>
<!-- ================== TOOL DIRECTORY: SECTION 2 ================== -->
<section class="tool-section" id="hearing-aids" aria-labelledby="hearing-aids-title">
<div class="section-header">
<div>
<p class="section-kicker">02 / Amplification & technology</p>
<h2 id="hearing-aids-title">Hearing Aids</h2>
<p class="section-description">Interactive resources for fitting, processing, and technology-focused clinical reasoning.</p>
</div>
<span class="section-counter">5 tools</span>
</div>
<div class="tool-grid" id="hearing-aids-grid">
<!-- Keep Frequency Lowering Fitting Assistants FIRST in this section. -->
<article class="tool-card">
<div class="card-utility"><span class="card-category">Hearing Aids</span><span class="card-number" aria-hidden="true">01</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/fl_assist/" target="_blank" rel="noopener noreferrer">Frequency Lowering Fitting Assistants<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>A centralized collection of manufacturer-specific fitting assistants supporting the selection and optimization of frequency-lowering technologies in hearing aids. The landing page also provides learning resources, clinical verification guidance, and supporting research materials.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/fl_assist/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— Frequency Lowering Fitting Assistants</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
<article class="tool-card">
<div class="card-utility"><span class="card-category">Hearing Aids</span><span class="card-number" aria-hidden="true">02</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/naomi/" target="_blank" rel="noopener noreferrer">Nonlinear Amplification Observation and Manipulation Interface (NAOMI)<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>An interactive visualization tool demonstrating how expansion, wide dynamic range compression, output limiting, and gain adjustments affect nonlinear hearing-aid amplification. Users can change processing parameters and immediately observe their effects on input-output functions, input-gain relationships, and related amplification displays.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/naomi/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— NAOMI</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
<article class="tool-card">
<div class="card-utility"><span class="card-category">Hearing Aids</span><span class="card-number" aria-hidden="true">03</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/directional_array_laboratory/" target="_blank" rel="noopener noreferrer">Directional Array Laboratory<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>An interactive simulation environment illustrating the principles of directional microphone arrays and their applications to hearing aids. Animated sound fields, polar patterns, and directivity measures reveal how microphone configuration, frequency, hearing-aid orientation, head effects, and reverberation influence directional performance.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/directional_array_laboratory/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— Directional Array Laboratory</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
<article class="tool-card">
<div class="card-utility"><span class="card-category">Hearing Aids</span><span class="card-number" aria-hidden="true">04</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/DSP_Simulator/" target="_blank" rel="noopener noreferrer">Au.D. Hearing Aid Engineer DSP Design Simulator<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>A case-based educational simulator in which audiology students make digital signal processing (DSP) design decisions for realistic hearing-aid scenarios. Learners evaluate engineering tradeoffs involving sampling, bandwidth, digital resolution, processing, and delay while receiving performance feedback and documenting their design rationale.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/DSP_Simulator/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— Au.D. Hearing Aid Engineer DSP Design Simulator</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
<article class="tool-card">
<div class="card-utility"><span class="card-category">Hearing Aids</span><span class="card-number" aria-hidden="true">05</span></div>
<h3><a href="https://hhs.purdue.edu/ear-lab/dnr_patient_centered_decision_simulator/" target="_blank" rel="noopener noreferrer">DNR Patient-Centered Decision Simulator<span class="sr-only"> (opens in a new tab)</span></a></h3>
<p>An interactive clinical reasoning simulator focused on patient-centered decisions about digital noise reduction (DNR) in hearing aids. Realistic scenarios guide learners through evaluating listening complaints, selecting interventions, considering processing tradeoffs, and assessing outcomes with individualized feedback.</p>
<div class="card-footer"><a class="open-tool" href="https://hhs.purdue.edu/ear-lab/dnr_patient_centered_decision_simulator/" target="_blank" rel="noopener noreferrer">Open Tool <span class="sr-only">— DNR Patient-Centered Decision Simulator</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a></div>
</article>
</div>
<p class="empty-section" data-empty-for="hearing-aids-grid" hidden>No hearing-aid tools match your search.</p>
</section>
</main>
<footer class="site-footer">
<div class="container footer-inner">
<div>
<p class="footer-mark">ACE</p>
<p class="footer-name">Audiology Clinical & Educational Tools</p>
<p class="footer-affiliation">A collection of interactive resources developed by Purdue University's Experimental Amplification Research (EAR) Lab.</p>
</div>
<div class="footer-actions">
<a class="footer-lab-link" href="https://hhs.purdue.edu/ear-lab/" target="_blank" rel="noopener noreferrer">Visit Purdue EAR Lab <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14m-6-6 6 6-6 6"/></svg><span class="sr-only"> (opens in a new tab)</span></a>
<a class="back-to-top" href="#top"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V4m-7 7 7-7 7 7"/></svg>Back to top</a>
</div>
</div>
</footer>
<script>
/*
Internal navigation fix for CMS/iframe embeds:
In an iframe srcdoc document, href="#diagnostics" can resolve against
the *host page* rather than this document, recursively loading the
host Purdue page and duplicating its logo and scrollbars.
Prevent that navigation and scroll inside this document instead.
Works for mouse, touch, keyboard, and newly added categories.
The original href attributes remain useful in a standalone no-JS page.
*/
(() => {
const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.addEventListener('click', (event) => {
const element = event.target;
const link = element instanceof Element ? element.closest('a[href^="#"]') : null;
if (!link) return;
const id = link.getAttribute('href').slice(1);
const destination = id && document.getElementById(id);
if (!destination) return;
event.preventDefault();
// Do NOT set location.hash or history.pushState here. In an
// embedded srcdoc frame, changing the URL can reload the parent.
destination.scrollIntoView({
behavior: reducedMotion ? 'auto' : 'smooth', block: 'start'
});
if (!destination.hasAttribute('tabindex')) destination.setAttribute('tabindex', '-1');
destination.focus({ preventScroll: true });
// When the optional auto-height Purdue embed is used, ask its
// parent to scroll the *single* outer page to this section.
if (window.parent !== window) {
window.parent.postMessage({
type: 'ACE_SCROLL_TO',
y: Math.round(destination.getBoundingClientRect().top + window.scrollY)
}, '*');
}
});
})();
/* Auto-size the ACE frame in the existing Purdue HFCM loader.
Also supports the optional standalone embed snippet; a direct browser
visit requires no parent code or changes to other EAR Lab tools. */
(() => {
if (window.parent === window) return;
let scheduled = false;
const announceHeight = () => {
if (scheduled) return;
scheduled = true;
window.requestAnimationFrame(() => {
scheduled = false;
// The Purdue HFCM "Standalone HTML Page Loader" puts this
// complete document in a same-origin iframe with a fixed 820px-ish
// height. Its parent does not listen for ACE_HEIGHT messages.
// Resize ONLY this ACE iframe directly; do not change the shared
// HFCM snippet, which is also used by other EAR Lab applications.
const height = Math.ceil(Math.max(
document.body.scrollHeight,
document.body.getBoundingClientRect().height
)) + 3;
try {
const frame = window.frameElement;
if (frame && frame.classList.contains('standalone-html-frame')) {
if (Math.abs(frame.getBoundingClientRect().height - height) > 3) {
frame.style.minHeight = '0';
frame.style.height = height + 'px';
}
}
} catch (_) { /* Cross-origin parents cannot be resized directly. */ }
// Keep supporting the optional dedicated embed snippet as well.
window.parent.postMessage({ type: 'ACE_HEIGHT', height }, '*');
});
};
window.addEventListener('load', announceHeight);
window.addEventListener('resize', announceHeight);
window.addEventListener('message', (event) => {
if (event.source === window.parent && event.data?.type === 'ACE_REQUEST_HEIGHT') announceHeight();
});
if ('ResizeObserver' in window) new ResizeObserver(announceHeight).observe(document.body);
announceHeight();
})();
/* Optional progressive-enhancement search. All content is static HTML,
remains visible without JavaScript, and is automatically searchable
when a maintainer adds new .tool-card entries. */
(() => {
const panel = document.getElementById('search-panel');
const input = document.getElementById('tool-search');
const status = document.getElementById('search-status');
const cards = Array.from(document.querySelectorAll('.tool-card'));
const grids = Array.from(document.querySelectorAll('.tool-grid'));
if (!panel || !input || !status || !cards.length) return;
panel.hidden = false;
const update = () => {
const term = input.value.trim().toLocaleLowerCase();
let matches = 0;
for (const card of cards) {
const shown = !term || card.textContent.toLocaleLowerCase().includes(term);
card.hidden = !shown;
if (shown) matches++;
}
for (const grid of grids) {
const empty = document.querySelector('[data-empty-for="' + grid.id + '"]');
if (empty) empty.hidden = Array.from(grid.children).some(card => !card.hidden);
}
status.textContent = !term ? 'Showing all ' + cards.length + ' tools' : matches === 0 ? 'No tools found. Try a different search.' : 'Showing ' + matches + ' of ' + cards.length + ' tools';
};
input.addEventListener('input', update);
input.addEventListener('keydown', event => {
if (event.key === 'Escape' && input.value) { input.value = ''; update(); }
});
})();
</script>
</body>
</html>