Skip to content

Commit

Permalink
Added anchor to top reference audio
Browse files Browse the repository at this point in the history
  • Loading branch information
@harveyf2801
harveyf2801 committed Apr 27, 2024
1 parent e17c430 commit dcfb694
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 35 deletions.
20 changes: 10 additions & 10 deletions _pages/apa_listening_test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ <h2>Information</h2>
<h2>Test 1</h2>
<p>In the following section, you will listen to several sine waves. Please evaluate each test sample based on how the perceived loudness and quality compares to the reference audio.</p>
<br>
<div class="filled-container">
<div class="filled-container sticky-element">
<h4 style="text-align: center;">Reference Audio:</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/ref_sine.wav?raw=true" type="audio/mpeg">
Expand Down Expand Up @@ -257,7 +257,7 @@ <h4 style="text-align: center;">G</h4>
<h2>Test 2</h2>
<p>In the following section, you will listen to several snare samples. Please evaluate each test sample based on how the perceived loudness and quality compares to the reference audio.</p>
<br>
<div class="filled-container">
<div class="filled-container sticky-element">
<h4 style="text-align: center;">Reference Audio:</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/ref_snare1.wav?raw=true" type="audio/mpeg">
Expand Down Expand Up @@ -402,7 +402,7 @@ <h4 style="text-align: center;">G</h4>
</div>
<!-- Model -->
<div class="flex column filled-container">
<h4 style="text-align: center;">G</h4>
<h4 style="text-align: center;">H</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/model_snare1.wav?raw=true" type="audio/mpeg">
Your browser does not support the audio element.
Expand All @@ -424,7 +424,7 @@ <h4 style="text-align: center;">G</h4>
<h2>Test 3</h2>
<p>In the following section, you will listen to another set of snare samples. Please evaluate each test sample based on how the perceived loudness and quality compares to the reference audio.</p>
<br>
<div class="filled-container">
<div class="filled-container sticky-element">
<h4 style="text-align: center;">Reference Audio:</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/ref_snare2.wav?raw=true" type="audio/mpeg">
Expand Down Expand Up @@ -569,7 +569,7 @@ <h4 style="text-align: center;">G</h4>
</div>
<!-- Cross Correlation -->
<div class="flex column filled-container">
<h4 style="text-align: center;">G</h4>
<h4 style="text-align: center;">H</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/cross_correlation_snare2.wav?raw=true" type="audio/mpeg">
Your browser does not support the audio element.
Expand All @@ -591,7 +591,7 @@ <h4 style="text-align: center;">G</h4>
<h2>Test 4</h2>
<p>In the following section, you will listen to another set of snare samples. Please evaluate each test sample based on how the perceived loudness and quality compares to the reference audio.</p>
<br>
<div class="filled-container">
<div class="filled-container sticky-element">
<h4 style="text-align: center;">Reference Audio:</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/ref_snare3.wav?raw=true" type="audio/mpeg">
Expand Down Expand Up @@ -736,7 +736,7 @@ <h4 style="text-align: center;">G</h4>
</div>
<!-- Cross Spectrum -->
<div class="flex column filled-container">
<h4 style="text-align: center;">G</h4>
<h4 style="text-align: center;">H</h4>
<audio controls>
<source src="https://github.com/harveyf2801/WebAudioEvaluationTool/blob/master/media/APA/cross_spectrum_snare3.wav?raw=true" type="audio/mpeg">
Your browser does not support the audio element.
Expand All @@ -757,12 +757,12 @@ <h4 style="text-align: center;">G</h4>

<br>

<p><em>Please make sure to submit your results below before exiting the test.</em></p>

<input type="hidden" name="_autoresponse" value="Thank you for participating in this listening test!">
<input type="hidden" name="_next" value="{{ site.url }}/apa_listening_test_submit.html">
<button type="submit" class="button">Send</button>
<button type="submit" class="button">Submit Results</button>
</form>

<!-- Thank you for participating in this listening test. -->
</div>
</section>
</main>
15 changes: 14 additions & 1 deletion _sass/1-helpers/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,4 +162,17 @@
.outline {
border: #cc1616 solid 1px;
border-radius: 2px;
}
}

.sticky-element {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
z-index: 1000; /* Set a high z-index value to keep it at the front */
}

.sticky {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
}
69 changes: 45 additions & 24 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,12 @@ window.addEventListener('resize', (event) => {


/* - SCROLL FUNCTIONS - */
// Show the 'go to top' button when the windows scrolled down 20px from the top
let toTopBtn = document.getElementById("to-top");

window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
topTopScroll(currentScroll);
toTopScroll(currentScroll);
navShow(currentScroll);
});

Expand All @@ -30,31 +33,32 @@ let lastScroll = 0;
const navbar = document.querySelector(".nav-bar");

function navShow(currentScroll) {
if (!menuopen) {
if (currentScroll <= 0 && !navbar.classList.contains("scroll-down")) {
navbar.classList.remove("scroll-up");
navbar.classList.remove("scroll-down");
}
if (currentScroll > lastScroll && !navbar.classList.contains("scroll-down")) {
navbar.classList.remove("scroll-up");
navbar.classList.add("scroll-down");
}
if (currentScroll < lastScroll && navbar.classList.contains("scroll-down")) {
navbar.classList.remove("scroll-down");
navbar.classList.add("scroll-up");
if (navbar){
if (!menuopen) {
if (currentScroll <= 0 && !navbar.classList.contains("scroll-down")) {
navbar.classList.remove("scroll-up");
navbar.classList.remove("scroll-down");
}
if (currentScroll > lastScroll && !navbar.classList.contains("scroll-down")) {
navbar.classList.remove("scroll-up");
navbar.classList.add("scroll-down");
}
if (currentScroll < lastScroll && navbar.classList.contains("scroll-down")) {
navbar.classList.remove("scroll-down");
navbar.classList.add("scroll-up");
}
}
lastScroll = currentScroll;
}
lastScroll = currentScroll;
}

// Show the 'go to top' button when the windows scrolled down 20px from the top
toTopBtn = document.getElementById("to-top");

function topTopScroll(currentScroll) {
if (currentScroll > 20 || currentScroll > 20) {
toTopBtn.style.display = "block";
} else {
toTopBtn.style.display = "none";
function toTopScroll(currentScroll) {
if (toTopBtn) {
if (currentScroll > 20 || currentScroll > 20) {
toTopBtn.style.display = "block";
} else {
toTopBtn.style.display = "none";
}
}
}

Expand Down Expand Up @@ -181,6 +185,23 @@ function setupTypewriter(t) {
};
}

const refObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
const stickyElement = entry.target;
if (entry.isIntersecting) {
stickyElement.classList.add('sticky');
} else {
stickyElement.classList.remove('sticky');
}
});
});

document.querySelectorAll('.sticky-element').forEach(element => {
refObserver.observe(element);
});

var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typer);
typewriter.type();
if (typer) {
typewriter = setupTypewriter(typer);
typewriter.type();
}

0 comments on commit dcfb694

Please sign in to comment.