pitch-machine [Worth]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>
<script>
function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}
//generated by chatgpt

function isPortraitMode() {
    return window.matchMedia("(orientation: portrait)").matches;
}
//generated by chatgpt



//generated by chatgpt modified by Steve

    //helped by chatgpt
    //maybe partially bardAI
    let homeButton = document.getElementsByClassName('navbar-brand d-flex align-items-center')[0]
function removeCrap (){
homeButton = document.getElementsByClassName('navbar-brand d-flex align-items-center')[0]
document.getElementsByTagName('head')[0].remove()
document.getElementsByTagName('body')[0].remove()
}

let pitchStuff = document.createElement('div')
pitchStuff.id = 'pichStuff'
// Create a container div
var sliderContainer = document.createElement('div');
sliderContainer.classList.add('slider-container');

// Create min label
var minLabel = document.createElement('div');
minLabel.setAttribute('id', 'min');
minLabel.textContent = '50';
minLabel.style.color = 'white'

// Create max label
var maxLabel = document.createElement('div');
maxLabel.setAttribute('id', 'max');
maxLabel.textContent = '16000';
maxLabel.style.color = 'white'

// Create a button with id 'back'
var backButton = document.createElement('button');
backButton.id = 'back';
backButton.textContent = 'Back';
backButton.style.fontSize = '100%'
pitchStuff.appendChild(backButton);

// Style the 'back' button
backButton.style.display = 'block'; // Change display property to block

// Create a button with id 'average'
var averageButton = document.createElement('button');
averageButton.id = 'average';
averageButton.textContent = 'Average';
averageButton.style.fontSize = '100%'
pitchStuff.appendChild(averageButton);

// Style the 'average' button
averageButton.style.display = 'block'; // Change display property to block

// Create a button with id 'hi'
var hiButton = document.createElement('button');
hiButton.id = 'hi';
hiButton.textContent = 'Press to start Pitch Machine';
hiButton.style.fontSize = '200%'
pitchStuff.appendChild(hiButton);

// Style the 'hi' button
hiButton.style.display = 'inline-block';

// Create a button with id 'enterM'
var enterMButton = document.createElement('button');
enterMButton.id = 'enterM';
pitchStuff.appendChild(enterMButton);

// Style the 'enterM' button
enterMButton.style.display = 'block'; // Change display property to block

// Create a button with id 'enterF'
var enterFButton = document.createElement('button');
enterFButton.id = 'enterF';
pitchStuff.appendChild(enterFButton);

// Style the 'enterF' button
enterFButton.style.display = 'block'; // Change display property to block

// Create range input
var rangeInput = document.createElement('input');
rangeInput.setAttribute('type', 'range');
rangeInput.setAttribute('min', '50');
rangeInput.setAttribute('max', '16000');
rangeInput.setAttribute('value', '1000');
rangeInput.classList.add('slider');
rangeInput.setAttribute('id', 'mySlider');

// Create slider value display
var sliderValue = document.createElement('div');
sliderValue.setAttribute('id', 'sliderValue');
sliderValue.textContent = '1000';
sliderValue.style.color = 'white'
sliderValue.style.fontSize = '300%'

// Append elements to the container div
sliderContainer.appendChild(minLabel);
sliderContainer.appendChild(rangeInput);
sliderContainer.appendChild(maxLabel);

// Append container div and slider value display to the body
pitchStuff.appendChild(sliderContainer);
pitchStuff.appendChild(sliderValue);

document.documentElement.appendChild(pitchStuff)

// Find the HTML element with the id "mySlider"
var mySlider = document.getElementById('mySlider');

// Create a <style> element
var styleElement = document.createElement('style');

// Define CSS rules for the .slider class
var cssText = '.slider {' +
                '-webkit-appearance: none;' +
                'width: 150%;' +
                'height: 25px;' +
                'background: #d3d3d3;' +
                'outline: none;' +
                'opacity: 0.7;' +
                '-webkit-transition: .2s;' +
                'transition: opacity .2s;' +
                'transform: rotate(90deg);' + // Add the transform property
              '}' +
              '.slider:hover {' +
                'opacity: 1;' +
              '}' +
              '.slider::-webkit-slider-thumb {' +
                '-webkit-appearance: none;' +
                'appearance: none;' +
                'width: 25px;' +
                'height: 75px;' +
                'background: #04AA6D;' +
                'cursor: pointer;' +
              '}' +
              '.slider::-moz-range-thumb {' +
                'width: 25px;' +
                'height: 75px;' +
                'background: #04AA6D;' +
                'cursor: pointer;' +
              '}';

// Set the CSS rules as text content of the <style> element
styleElement.textContent = cssText;

// Append the <style> element to the <head> section of the HTML document
document.documentElement.appendChild(styleElement);

// Find the HTML element with the id "min"
var min = document.getElementById('min');

// Apply styles to the "min" element
min.style.top = '1%';
min.style.left = '45%';
min.style.position = 'absolute';
min.style.fontSize = '200%'

// Find the HTML element with the id "max"
var max = document.getElementById('max');

// Apply styles to the "max" element
max.style.left = '40%';
max.style.top = '90%';
max.style.position = 'absolute';
max.style.fontSize = '200%'

// Find the HTML element with the id "enterM"
var enterM = document.getElementById('enterM');

// Apply styles to the "enterM" element
enterM.style.position = 'absolute';
enterM.style.right = '0%';
enterM.style.fontSize = '300%';

// Find the HTML element with the id "enterF"
var enterF = document.getElementById('enterF');

// Apply styles to the "enterF" element
enterF.style.position = 'absolute';
enterF.style.right = '0%';
enterF.style.top = '60%';
enterF.style.fontSize = '300%';
enterF.style.color = 'pink';

// Find the HTML element with the id "back"
var back = document.getElementById('back');

// Apply styles to the "back" element
back.style.position = 'absolute';
back.style.left = '0px';
back.style.top = '25%';

// Find the HTML element with the id "average"
var average = document.getElementById('average');

// Apply styles to the "average" element
average.style.position = 'absolute';
average.style.left = '0px';
average.style.top = '30%';

// --------------------------------------------------------------------------
// -- test.js
// --------------------------------------------------------------------------
// GAIN NOT WORKING PROPERLY

function downloadTextFile(content, filename) {
  const blob = new Blob([content], { type: 'text/plain' });

  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;

  // Append the link to the document
  document.body.appendChild(link);

  // Trigger a click on the link to initiate the download
  link.click();

  // Remove the link from the document
  document.body.removeChild(link);
}

// Example usage

let averageN = 8105.972222222223

let data = []

let dataString = ''

function startOscillator (){
    let oscillator = audioContext.createOscillator();
    oscillator.connect(audioContext.destination);
    oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
    return oscillator
}

/*
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let oscillator = startOscillator()
oscillator.start();
*/
let audioContext;
let oscillator;

// document.addEventListener('click', function() {
//     if (audioContext === undefined){
//         console.log('creating')

//         audioContext = new (window.AudioContext || window.webkitAudioContext)();
//         oscillator = startOscillator()
//         oscillator.start();
//         document.body.style.backgroundColor = 'red'
// }
// })


document.getElementById("mySlider").addEventListener("input", function() {
//     audioContext = new (window.AudioContext || window.webkitAudioContext)();
//     oscillator = startOscillator()
//     oscillator.start();
  const sliderValue = document.getElementById("mySlider").value;
    console.log('gain',(1000 - JSON.parse(sliderValue))/950)
  document.getElementById("sliderValue").innerHTML = sliderValue;
  oscillator.frequency.setValueAtTime(sliderValue, audioContext.currentTime);
});

document.getElementById('hi').onclick = function (){
    if (audioContext === undefined){
        document.documentElement.style.backgroundColor = 'black'
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        oscillator = startOscillator()
        oscillator.start();
        hi.remove()
    }
}

//YOOO

document.getElementById('enterM').innerText = '-->'
document.getElementById('enterF').innerText = '-->'

document.getElementById('enterM').onclick = function (){
    data.push({gender: 'M', value: document.getElementById("mySlider").value})
    oscillator.frequency.setValueAtTime(7751.952380952381 , audioContext.currentTime);
    dataString += 'M,' + document.getElementById("mySlider").value.toString() + '\n'
}

document.getElementById('enterF').onclick = function (){
    data.push({gender: 'F', value: document.getElementById("mySlider").value})
    oscillator.frequency.setValueAtTime(8601.6 , audioContext.currentTime);
    dataString += 'F,' + document.getElementById("mySlider").value.toString() + '\n'
}

document.getElementById('average').onclick = function (){
    oscillator.frequency.setValueAtTime(8105.972222222223 , audioContext.currentTime);
}

document.getElementById('back').onclick = function (){
    if (audioContext === undefined){
        document.documentElement.style.backgroundColor = 'black'
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        oscillator = startOscillator()
        oscillator.start();
    }
}
document.getElementById('back').remove()

// Function to prevent scrolling
function preventScroll(event) {
    event.preventDefault();
}

// Add event listener to the window object
window.addEventListener('wheel', preventScroll, { passive: false });

mySlider.style.top = '50%'
mySlider.style.left = '-25%'
mySlider.style.position = 'absolute'
removeCrap()
//slider code from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider

// Example usage
if (isMobileDevice() && isPortraitMode()) {

} else {

alert ('Pitch Machine is only available on mobile devices in portrait mode because survey was conducted with a phone in portrait mode so the interface on a landscape or non touch device has not been fully developed. Pitch Machine 僅適用於縱向模式的移動設備，因為調查是在縱向模式下的手機上進行的，因此橫向或非觸控設備上的介面尚未完全開發')
//document.documentElement.remove()
pichStuff.remove()
let qr = document.createElement('img')
qr.style.width = 'auto'
qr.style.height = '40%'
qr.src = 'https://renickbell.net/ed/2024worth/lib/exe/fetch.php?media=pitch-machine-qrcode.png'

let err = document.createElement('div')
err.style.color = 'black'
err.innerText = 'Pitch Machine is only available on mobile devices in portrait mode because survey was conducted with a phone in portrait mode so the interface on a landscape or non touch device has not been fully developed. Pitch Machine 僅適用於縱向模式的移動設備，因為調查是在縱向模式下的手機上進行的，因此橫向或非觸控設備上的介面尚未完全開發. Please user your phone to scan the link of the Pitch Machine below:'
err.style.fontSize = '200%'
err.style.width = '96%'
err.style.left = '2%'
err.style.position = 'relative'
qr.style.left = '2%'
qr.style.position = 'relative'
document.documentElement.appendChild(err)
document.documentElement.appendChild(qr)
document.documentElement.appendChild(homeButton)
 let logo = document.getElementById('dw__logo')

logo.remove()

document.getElementsByClassName('navbar-brand d-flex align-items-center')[0].appendChild(logo)
let home = document.getElementsByClassName('navbar-brand d-flex align-items-center')[0]
home.style.left = '2%'
home.style.position = 'relative'

}

</script>
</html>