Comments (1)
.task-container {
background-color: white;
border: 1px solid #000;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.task {
font-size: 24px;
text-align: center;
margin-bottom: 15px;
line-height: 1.5;
}
.task pre {
margin: 0;
white-space: pre-wrap;
}
.user-input {
padding: 5px;
font-size: 20px;
text-align: center;
width: 100px;
}
.division-symbol {
font-size: 28px;
vertical-align: middle;
}
.check-button {
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.solution {
font-size: 20px;
margin-top: 15px;
}
#dividend, #divisor {
font-size: 24px;
}
.equals-symbol {
font-size: 24px;
}
</style>
<pre>
<span id="dividend"></span> <span class="division-symbol">÷</span> <span id="divisor"></span> <span class="equals-symbol">=</span>
</pre>
</div>
<div>
<input class="user-input" type="text" id="userAnswer" placeholder=" ">
</div>
<div>
<button class="check-button" onclick="checkAnswer()">Check</button>
</div>
<div class="solution" id="solution"></div>
</div>
<script>
function generateDivisionTask() {
let dividend, divisor, answer;
do {
dividend = Math.floor(Math.random() * 1000) + 100;
divisor = Math.floor(Math.random() * 30) + 2;
answer = dividend / divisor;
} while (answer % 1 !== 0);
return {
dividend: dividend,
divisor: divisor,
answer: answer
};
}
const task = generateDivisionTask();
document.getElementById('dividend').textContent = task.dividend;
document.getElementById('divisor').textContent = task.divisor;
function checkAnswer() {
const userAnswer = document.getElementById('userAnswer').value.replace(/\s/g, '');
const correctAnswer = task.answer;
const solutionDiv = document.getElementById('solution');
if (!isNaN(userAnswer) && userAnswer.length > 0) {
if (parseFloat(userAnswer) === correctAnswer) {
solutionDiv.textContent = 'Richtig! Die Antwort ist ' + correctAnswer + '.';
solutionDiv.style.color = 'green';
} else {
solutionDiv.textContent = 'Falsch. Versuche es erneut.';
solutionDiv.style.color = 'red';
}
} else {
solutionDiv.textContent = 'Bitte gib eine gültige Zahl ein.';
solutionDiv.style.color = 'red';
}
}
</script>
from kumon-math-app.
Related Issues (19)
- Document the Kumon Learning Method for "kumon-math-app" HOT 1
- Optimize SimpleSubstraktion
- Write a generator Function which creates simple tasks for multiplication
- Complex Multiplication HOT 2
- Complex Addition HOT 1
- Complex Substraction HOT 1
- simple division
- Create an API for debugging
- Redesign Header & Footer for Task View
- Create new Dashboard Design
- Create Markdown Documentation on "App Motivation" HOT 1
- Review and Extend Documentation on Prerequisites, Setup, and Quick Start HOT 2
- Establish Basic Project Skeleton, Task Addition Guide, and Initial Layout HOT 1
- Implement UI for Solution Submission Methods
- Implement Overview Page for Math Task Profiles HOT 1
- Develop Standards for Technical Documentation Tickets
- Develop Standards for Non-Technical Documentation Tickets
- Research OCR Solutions for JavaScript
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kumon-math-app.