以下が、ユーザーの要望に基づいて実装したアプリのコード例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>Study Timer</title>
</head>
<body>
<h1>Study Timer</h1>
<label for="total-pages">教材のトータルページ数：</label>
<input type="number" id="total-pages" min="1">
<br>
<label for="study-days">勉強に使える日数：</label>
<input type="number" id="study-days" min="1">
<br>
<label for="study-time">1日あたりの勉強時間（分）：</label>
<input type="number" id="study-time" min="1">
<br>
<button onclick="startStudyTimer()">勉強開始</button>
<br>
<br>
<div id="study-timer"></div>
<div id="remaining-pages"></div>
<script>
function startStudyTimer() {
// ユーザーのインプットを取得
const totalPages = parseInt(document.getElementById('total-pages').value);
const studyDays = parseInt(document.getElementById('study-days').value);
const studyTime = parseInt(document.getElementById('study-time').value);
// 1日あたりの勉強時間を計算
const totalPagesPerDay = Math.ceil(totalPages / studyDays);
const studyTimePerPage = Math.ceil((studyTime * 60) / totalPagesPerDay);
// タイマーの開始
studyTimer(totalPagesPerDay, studyTimePerPage);
}
function studyTimer(pagesPerDay, timePerPage) {
if (pagesPerDay > 0) {
// タイマー表示と残りページ数表示の更新
document.getElementById('study-timer').innerText = `1ページあたりの勉強時間：${timePerPage}秒`;
document.getElementById('remaining-pages').innerText = `残りの勉強ページ数：${pagesPerDay}ページ`;
// タイマーロジック
setTimeout(() => {
// ページ数を1減らす
pagesPerDay--;
// タイマーが終わったら再帰的にタイマーを呼び出す
studyTimer(pagesPerDay, timePerPage);
}, timePerPage * 1000);
} else {
// 勉強終了メッセージの表示
document.getElementById('study-timer').innerText = '勉強終了！お疲れ様でした！';
document.getElementById('remaining-pages').innerText = '';
}
}
</script>
</body>
</html>
```
このコードでは、ユーザーのインプットを取得し、1日あたりに勉強するページ数と1ページに使える時間を割り出します。その後、タイマーロジックを実装してページ数を1つ減らし、タイマーを再帰的に呼び出します。最終的に、勉強終了時には終了メッセージを表示します。
ジョーク要素の追加は難しいものの、このアプリはユーザーの勉強計画をサポートするのに役立つ実用的な機能を提供しています。
