The Z Script Voice App
About this app
Create and simulate your own Z script dialogues using various GoAnimate characters and their voices!
The Z Script Voice App The Z Script Voice App Select a Character: Enter Dialogue: Generate Dialogue
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>The Z Script Voice App</title>
<meta name="description" content="Create and simulate your own Z script dialogues using various GoAnimate characters and their voices!" />
<meta name="keywords" content="GoAnimate, Z script, voice simulation, dropdowns, animation, dialogue" />
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
const characters = {
"Character 1": "Voice 1 - Funny Sound",
"Character 2": "Voice 2 - Dramatic Sound",
"Character 3": "Voice 3 - Happy Sound",
"Character 4": "Voice 4 - Sad Sound",
"Character 5": "Voice 5 - Angry Sound"
};
document.addEventListener("DOMContentLoaded", function() {
const charSelect = document.getElementById("characterSelect");
const dialogueInput = document.getElementById("dialogueInput");
const output = document.getElementById("output");
Object.keys(characters).forEach(character => {
const option = document.createElement("option");
option.value = character;
option.textContent = character;
charSelect.appendChild(option);
});
document.getElementById("generateQuote").addEventListener("click", function() {
const selectedCharacter = charSelect.value;
const dialogueText = dialogueInput.value;
if (selectedCharacter && dialogueText) {
const voice = characters[selectedCharacter];
output.innerHTML += `<p><strong>${selectedCharacter} (${voice}):</strong> ${dialogueText}</p>`;
dialogueInput.value = '';
} else {
alert("Please select a character and enter dialogue.");
}
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background: linear-gradient(135deg, #6e8bc3, #d0e5ff);
color: #333;
font-family: 'Arial', sans-serif;
}
#main-container {
margin-top: 50px;
}
h1 {
text-align: center;
color: #4a86e8;
}
.card {
border-radius: 15px;
background-color: #ffffff;
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
select, textarea {
border-radius: 10px;
border: 2px solid #4a86e8;
width: 100%;
margin-bottom: 15px;
}
button {
background: #4a86e8;
color: white;
border: none;
border-radius: 10px;
padding: 10px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background: #3671bd;
transition: background 0.3s;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="card">
<h1>The Z Script Voice App</h1>
<div class="form-group">
<label for="characterSelect">Select a Character:</label>
<select id="characterSelect" class="form-control"></select>
</div>
<div class="form-group">
<label for="dialogueInput">Enter Dialogue:</label>
<textarea id="dialogueInput" class="form-control" rows="2" placeholder="Type the character's dialogue here..."></textarea>
</div>
<button id="generateQuote">Generate Dialogue</button>
<div id="output" class="mt-3"></div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!