<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p class="ResultPTimer" id="result"></p>
<hr>
<h1 class="MainHeader" id="MainHeader">Manual Unknown Words Assist</h1>
<h2 class="SubHeading">The trick is to only repeat the things you just learned (can you see it when you close your eyes)</h2>
<h3 class="SubHeading">Co-Pilot Heavy Lifted</h3>
<br>
<form action="">
<label for="textArea"><i><b>Input Intial Text Here:</b></i></label><br>
<textarea class="textArea" id="textArea" rows="5">Blank spaces as a separator (Therefore for longer items-find-replace-space-with-dash). Only Paste words that you have just learned (i.e. can recall unassisted now but couldnt 10 min ago) here. Press generate on timer when ready</textarea><br>
<label for="OutputArea"><i><b>Words Learning/Learned</b></i></label><br>
<textarea class="textArea" id="OutputArea" rows="5">Use this space to hold word outside of the repitition loop</textarea>
<input type="button" id="populate" value="Populate Dropdown" onclick="populatedropdown()">
<select id="dropdown">
<option value="">Press Button on the Left to Populate Options Here</option>
</select>
<input type="button" disabled="true" id="restoretext" value="Restore Original Text" onclick="restoreoriginaltext()">
<br><br>
<input type="button" id="TransferDropdown" disabled="true" value="Transfer based on Dropdown" onclick="transferDropdown()">
<input type="button" value="Transfer only a random word" onclick="transferRandomWord()">
<input type="button" value="Transfer All" onclick="transfer()">
<input type="button" value="Transfer All Back" onclick="transferBack()">
<hr>
<input class="genbutton" type="button" value="Generate" onclick="generate()">
<input class="genbutton" type="button" value="Generate on a Timer" onclick="startGenerating()">
<input class="genbutton" disabled="true" id="stop" onclick="stopGenerating()" type="button" value="Stop Timer Generation">
<input class="genbutton" type="button" value="Generate for TTS" onclick="generateforTTS()">
<hr>
</form>
Experiment
<select name="random" id="MelodyConcepts">
<option>Melody Concepts from Wikipedia</option>
<option>Balungan </option>
<option>Cadence </option>
<option>Interval </option>
<option>Melisma </option>
<option>Melodic motion </option>
<option>Motif </option>
<option>Ornament </option>
<option>Trill </option>
<option>Pattern </option>
<option>Phrasing </option>
<option>Pitch </option>
<option>Rhythm </option>
<option>Sequence </option>
<option>Steps and skips </option>
<option>Timbre </option>
<option>Type (figure) </option>
<option>Ululation </option>
<option>Voice </option>
<option>Voice leading </option>
</select>
<button onclick="getDropdownOptions(MelodyConcepts)">Get Dropdown Options for Timer Practice</button>
<hr>
<label for="FullRandomListHistory"><i><b>Randomised History (TTS button = 60 words = long ones around one minute):</b></i></label><br>
<textarea class="textArea" id="FullRandomListHistory" rows="5">TODO Collect every word here for audio of random list add the new word to the front of the string</textarea>
</body>
</html>body {
/* Shape That Top 50% of Page is Solid Color */
background-image: linear-gradient(to bottom, #a3a2f5 10%, #b5e5a5 100%, #a2f2f2 100%);
/Shape That Bottom 50% of Page is Solid Color */
background-image: linear-gradient(to top, #a3a2f5 10%, #b5e5a5 100%, #a2f2f2 100%);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.genbutton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 15px;
}
.textArea {
width: 100%;
height: 100%;
border: none;
background-color: transparent;
}
.MainHeader {
font-size: 25px;
color: #a1f9a1;
text-align: center;
margin-top: 20px;
margin-bottom: 5px;
text-shadow: 3px 2px #000000;
}
.SubHeading {
font-size: 12px;
color: #a9c9f9;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
.ResultPTimer {
font-size: 40px;
color: Black;
text-align: center;
font-weight: bold;
}
/* Function that returns a random word from a list of words */
function getRandomWord(wordList) {
return wordList[Math.floor(Math.random() * wordList.length)];
}
/* Function that Takes Text from a Text Area*/
function getTextFromTextArea(textAreaId) {
return document.getElementById(textAreaId).value;
}
/* Function that Takes Text and puts in list format*/
function getListFromText(text) {
return text.split(/\s+/);
}
/* Function that deletes text from a text area*/
function deleteTextFromTextArea(textAreaId) {
document.getElementById(textAreaId).value = "";
}
/* Function that adds text to a text area*/
function addTextToTextArea(textAreaId, text) {
document.getElementById(textAreaId).value += text;
}
/* Function that deletes a given word from a text area*/
function deleteWordFromTextArea(textAreaId, word) {
var text = getTextFromTextArea(textAreaId);
var words = getListFromText(text);
var newText = "";
for (var i = 0; i < words.length; i++) {
if (words[i] != word) {
newText += words[i] + " ";
}
}
deleteTextFromTextArea(textAreaId);
addTextToTextArea(textAreaId, newText);
}
/* Turn Words in textarea into Dropdown */
function turnWordsIntoDropdown(textAreaId, dropdownId) {
var text = getTextFromTextArea(textAreaId);
var words = getListFromText(text);
var dropdown = document.getElementById(dropdownId);
for (var i = 0; i < words.length; i++) {
var option = document.createElement("option");
option.text = words[i];
dropdown.add(option);
}
}
/* Function that generates a random word */
function generate() {
var text = getTextFromTextArea("textArea");
var list = getListFromText(text);
var randomWord = getRandomWord(list);
document.getElementById("result").innerHTML = randomWord;
}
/* Function that transfers text from a textArea to an outputArea */
function transfer() {
var text = getTextFromTextArea("textArea");
addTextToTextArea("OutputArea", text);
deleteTextFromTextArea("textArea");
}
/* Function that transfers text from an outputArea to a textArea */
function transferBack() {
var text = getTextFromTextArea("OutputArea");
addTextToTextArea("textArea", text);
deleteTextFromTextArea("OutputArea");
}
/* Function that transfers a random word from a textArea to an outputArea */
function transferRandomWord() {
var text = getTextFromTextArea("textArea");
var list = getListFromText(text);
var randomWord = getRandomWord(list);
addTextToTextArea("OutputArea", randomWord + " ");
deleteWordFromTextArea("textArea", randomWord);
}
/* Function that generates a random word on a timer */
function generateOnTimer() {
var text = getTextFromTextArea("textArea");
var list = getListFromText(text);
var randomWord = getRandomWord(list);
document.getElementById("result").innerHTML = randomWord;
document.getElementById("FullRandomListHistory").innerHTML += " " + randomWord;
/*Allow stop button to be enabled*/
document.getElementById("stop").disabled = false;
/* Change Color of Stop Button */
document.getElementById("stop").style.backgroundColor = "#FF0000";
}
/* Function that generates a random word */
function generateforTTS() {
var text = getTextFromTextArea("textArea");
var list = getListFromText(text);
var TTSrandomtext = "";
for (var i = 0; i < 60; i++) {
TTSrandomtext += getRandomWord(list);
TTSrandomtext += " ";
}
document.getElementById("FullRandomListHistory").innerHTML = TTSrandomtext;
}
/* Declare a variable to hold the timer */
var timer;
/* Function to Set generateOnTimer to run every 1 second */
function startGenerating() {
timer = setInterval(generateOnTimer, 1000);
}
/* Function that stops the timer */
function stopGenerating() {
/* stop the timer */
clearInterval(timer);
/* Change Color of Stop Button back to default */
document.getElementById("stop").style.backgroundColor = "#4CAF50";
/* Clear the text from the result area */
document.getElementById("result").innerHTML = "";
/*Disable stop button*/
document.getElementById("stop").disabled = true;
}
/* Declare variable for recovery text */
var recovertext = "";
/* For Populate Dropdown */
function populatedropdown() {
/* Save the text from the textArea to a variable */
recovertext = getTextFromTextArea("textArea");
/* Delete first option from dropdown */
var dropdown = document.getElementById("dropdown");
dropdown.remove(0);
var text = getTextFromTextArea("textArea");
var list = getListFromText(text);
turnWordsIntoDropdown("textArea", "dropdown");
/* Enable Transfer Button */
document.getElementById("TransferDropdown").disabled = false;
/* Change populate button text */
document.getElementById("populate").innerHTML = "Dropdown Populated ==>";
/* Disable Populate Button */
document.getElementById("populate").disabled = true;
}
/* Restore Original Text */
function restoreoriginaltext() {
/* Delete text from textArea */
deleteTextFromTextArea("textArea");
deleteTextFromTextArea("OutputArea");
addTextToTextArea("textArea", recovertext);
/* Disable Transfer Button */
document.getElementById("TransferDropdown").disabled = true;
/* Change populate button text */
document.getElementById("populate").innerHTML = "Populate Dropdown";
/* Enable Populate Button */
document.getElementById("populate").disabled = false;
/* Disable Restore Button */
document.getElementById("restoretext").disabled = true;
}
/* Function that transfers based on dropdown */
function transferDropdown() {
var text = getTextFromTextArea("textArea");
var list = getListFromText(text);
var randomWord = getRandomWord(list);
var dropdown = document.getElementById("dropdown");
var selectedWord = dropdown.options[dropdown.selectedIndex].text;
addTextToTextArea("OutputArea", selectedWord + " ");
deleteWordFromTextArea("textArea", selectedWord);
/* Remove the selected word from the dropdown */
dropdown.remove(dropdown.selectedIndex);
/* Enable Restore Button */
document.getElementById("restoretext").disabled = false;
/* If there are no more words or just a space in the textarea, disable the Transfer Button */
if (getTextFromTextArea("textArea") == " " || getTextFromTextArea("textArea") == "") {
document.getElementById("TransferDropdown").disabled = true;
dropdown.add(new Option("No more words in dropdown", ""));
}
}
/* Function to get the options from a dropdown to a string */
function getDropdownOptions(dropdown) {
var options = "";
var tempoption = "";
for (var i = 0; i < dropdown.options.length; i++) {
/* if option has spaces in it, replace them with underscores */
if (dropdown.options[i].text.includes(" ")) {
tempoption = dropdown.options[i].text.replace(" ", "_");
tempoption = tempoption.replace(" ", "_");
options += tempoption + " ";
} else {
options += dropdown.options[i].text + " ";
}
}
/* put the options to textarea text */
addTextToTextArea("textArea", ' ' + options);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.