Dudley College App
About this app
Learn about Dudley College and explore interactive educational tools and games.
Dudley College App
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
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>Dudley College App</title>
<meta name="description" content="Learn about Dudley College and explore interactive educational tools and games.">
<meta name="keywords" content="Dudley College, education, interactive, tools, games">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Function to display Wikipedia article in a new tab
function openWikipedia() {
window.open("https://en.wikipedia.org/wiki/Dudley+College", "_blank", "noopener,noreferrer");
}
// Event listener for Wikipedia button click
$("#wikipedia-button").on("click", function() {
openWikipedia();
});
// Function to display interactive tool
function displayTool() {
// Display the tool in the main container
$("#main-container").html(`
<h2>Interactive Tool</h2>
<p>This is an interactive tool that helps you calculate your GPA.</p>
<div class="form-group">
<label for="credits">Total Credits:</label>
<input type="number" id="credits" class="form-control" min="0">
</div>
<div class="form-group">
<label for="grades">Grades:</label>
<input type="text" id="grades" class="form-control" placeholder="Enter grades separated by commas">
</div>
<button id="calculate-button" class="btn btn-primary">Calculate GPA</button>
<div id="result"></div>
`);
// Event listener for calculate button click
$("#calculate-button").on("click", function() {
// Get the values from the inputs
var credits = parseInt($("#credits").val());
var grades = $("#grades").val().split(",");
// Calculate the GPA
var totalPoints = 0;
for (var i = 0; i < grades.length; i++) {
totalPoints += parseFloat(grades[i]);
}
var gpa = totalPoints / credits;
// Display the result
$("#result").html(`<p>Your GPA is: ${gpa.toFixed(2)}</p>`);
});
}
// Function to display educational game
function displayGame() {
// Display the game in the main container
$("#main-container").html(`
<h2>Educational Game</h2>
<p>This is an educational game where you have to answer multiple-choice questions.</p>
<div id="question"></div>
<div id="options"></div>
<button id="next-button" class="btn btn-primary">Next Question</button>
<div id="result"></div>
`);
// Variable to store the current question index
var currentQuestionIndex = 0;
// Array of questions and their options
var questions = [
{
question: "What is the capital of France?",
options: ["Paris", "London", "Berlin", "Rome"],
answer: 0
},
{
question: "Who painted the Mona Lisa?",
options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"],
answer: 0
},
{
question: "What is the largest planet in our solar system?",
options: ["Jupiter", "Saturn", "Mars", "Earth"],
answer: 0
}
];
// Function to display the current question
function displayQuestion() {
var question = questions[currentQuestionIndex];
// Display the question
$("#question").html(`<p>${question.question}</p>`);
// Display the options
var optionsHtml = "";
for (var i = 0; i < question.options.length; i++) {
optionsHtml += `
<div class="form-check">
<input type="radio" id="option-${i}" name="options" class="form-check-input" value="${i}">
<label for="option-${i}" class="form-check-label">${question.options[i]}</label>
</div>
`;
}
$("#options").html(optionsHtml);
}
// Function to check the answer and display the result
function checkAnswer() {
var question = questions[currentQuestionIndex];
var selectedOption = parseInt($("input[name='options']:checked").val());
// Check if the selected option is the correct answer
if (selectedOption === question.answer) {
$("#result").html(`<p class="text-success">Correct!</p>`);
} else {
$("#result").html(`<p class="text-danger">Wrong!</p>`);
}
}
// Event listener for next button click
$("#next-button").on("click", function() {
// Check the answer
checkAnswer();
// Increment the current question index
currentQuestionIndex++;
// Check if all questions have been answered
if (currentQuestionIndex < questions.length) {
// Display the next question
displayQuestion();
} else {
// Display the final result
$("#main-container").html(`<p>You have completed the game!</p>`);
}
});
// Display the first question
displayQuestion();
}
// Function to display the app content
function displayAppContent() {
// Display the app header
$("#main-container").html(`
<h1>Welcome to Dudley College App!</h1>
<p>Dudley College is a further education school located in Dudley, England.</p>
<p>Explore the app to learn more about Dudley College and have fun with interactive tools and games!</p>
<button id="wikipedia-button" class="btn btn-primary">Learn More</button>
<button id="tool-button" class="btn btn-secondary">Interactive Tool</button>
<button id="game-button" class="btn btn-secondary">Educational Game</button>
`);
// Event listener for tool button click
$("#tool-button").on("click", function() {
displayTool();
});
// Event listener for game button click
$("#game-button").on("click", function() {
displayGame();
});
}
// Display the app content
displayAppContent();
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f8f9fa;
font-family: 'Roboto', sans-serif;
}
#main-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
}
.btn {
margin-top: 10px;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>
NEW APPS
These are apps made by the community!