未分類 未分類
未分類 未分類 ためし
<div id="quiz-container">
<div style="margin-bottom:10px;">
<label>開始番号: <input type="number" id="startNum" value="1" style="width:60px;"></label>
<label>終了番号: <input type="number" id="endNum" value="12" style="width:60px;"></label>
<button id="startQuizBtn">テスト開始</button>
</div>
<div id="quiz"></div>
<div id="pagination"></div>
<p id="score" style="font-weight:bold; margin-top:10px;"></p>
</div>
<style>
#quiz-container table.word-table {
border-collapse: collapse;
width: 100%;
font-family: "Segoe UI", sans-serif;
font-size: 14px;
}
.word-table th {
background: linear-gradient(to bottom, #5cb85c, #4cae4c);
color: white;
padding: 8px;
text-align: center;
border: 1px solid #3d8b3d;
}
.word-table td {
padding: 6px 8px;
border: 1px solid #3d8b3d;
}
.word-table tr:nth-child(even) { background-color: #e8f5e8; }
.word-table input {
width: 95%;
padding: 4px;
border: 1px solid #aaa;
border-radius: 4px;
outline: none;
}
.correct { background-color: #d4ffd4 !important; }
.incorrect { background-color: #ffd4d4 !important; }
.answer-text {
color: #c00;
font-size: 12px;
margin-left: 8px;
}
#pagination {
margin-top: 10px;
text-align: center;
}
button.page-btn {
margin: 2px;
padding: 4px 8px;
font-size: 14px;
border-radius: 6px;
border: 1px solid #3d8b3d;
background-color: #5cb85c;
color: white;
cursor: pointer;
transition: 0.2s;
}
button.page-btn:hover {
background-color: #4cae4c;
}
button#finishBtn {
margin-top: 10px;
padding: 6px 12px;
font-size: 14px;
border-radius: 6px;
border: 1px solid #3d8b3d;
background-color: #5cb85c;
color: white;
cursor: pointer;
transition: 0.2s;
}
button#finishBtn:hover { background-color: #4cae4c; }
@media screen and (max-width:600px){
#quiz-container table.word-table, .word-table th, .word-table td {
font-size: 12px;
}
}
</style>
<script>
(function(){
const words=[
{id:1, word:"apple", meaning:"りんご"},
{id:2, word:"book", meaning:"本"},
{id:3, word:"car", meaning:"車"},
{id:4, word:"dog", meaning:"犬"},
{id:5, word:"egg", meaning:"卵"},
{id:6, word:"fish", meaning:"魚"},
{id:7, word:"grape", meaning:"ぶどう"},
{id:8, word:"hat", meaning:"帽子"},
{id:9, word:"ice", meaning:"氷"},
{id:10, word:"juice", meaning:"ジュース"},
{id:11, word:"kite", meaning:"凧"},
{id:12, word:"lion", meaning:"ライオン"}
];
let quizData = [], currentPage = 0, perPage = 10;
let allAnswers = {};
function shuffleArray(arr){
const a = arr.slice();
for(let i=a.length-1;i>0;i--){
const j = Math.floor(Math.random()*(i+1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function normalize(s){ return (s||"").replace(/\u3000/g," ").trim(); }
function generateQuizTable(){
const startNum = document.getElementById("startNum");
const endNum = document.getElementById("endNum");
if (!startNum || !endNum) return;
const start = parseInt(startNum.value);
const end = parseInt(endNum.value);
quizData = words.filter(w => w.id >= start && w.id <= end);
if(quizData.length===0){
document.getElementById("quiz").innerHTML="指定範囲に単語がありません";
document.getElementById("score").textContent="";
document.getElementById("pagination").innerHTML="";
return;
}
quizData = shuffleArray(quizData);
currentPage = 0;
allAnswers = {};
renderPage();
}
function renderPage(){
const quizEl = document.getElementById("quiz");
const paginationEl = document.getElementById("pagination");
if (!quizEl || !paginationEl) return;
const startIdx = currentPage * perPage;
const endIdx = Math.min(startIdx + perPage, quizData.length);
let html = `<table class="word-table">
<tr><th>英単語</th><th>意味</th></tr>`;
for(let i=startIdx;i<endIdx;i++){
const item = quizData[i];
const value = allAnswers[i] || "";
html += `<tr>
<td>${item.word}</td>
<td><input type="text" data-answer="${item.meaning}" id="ans-${i}" value="${value}">
<span class="answer-text" id="right-${i}"></span></td>
</tr>`;
}
html += `</table>`;
const totalPages = Math.ceil(quizData.length/perPage);
if(currentPage === totalPages -1 && totalPages > 0){
html += `<button id="finishBtn">テスト終了</button>`;
}
quizEl.innerHTML = html;
document.querySelectorAll("#quiz input").forEach(input=>{
input.addEventListener("input",function(){
const idx = parseInt(this.id.split("-")[1]);
allAnswers[idx] = this.value;
});
});
if(document.getElementById("finishBtn")){
document.getElementById("finishBtn").addEventListener("click", finishTest);
}
let pageHtml = "";
for(let p=0;p<totalPages;p++){
pageHtml += `<button class="page-btn" data-page="${p}">${p+1}</button>`;
}
paginationEl.innerHTML = pageHtml;
document.querySelectorAll(".page-btn").forEach(btn=>{
btn.addEventListener("click",function(){
currentPage = parseInt(this.dataset.page);
renderPage();
});
});
}
function finishTest(){
const scoreEl = document.getElementById("score");
if (!scoreEl) return;
let correctCount = 0;
for(let i=0;i<quizData.length;i++){
const inputValue = normalize(allAnswers[i] || "");
const correct = normalize(quizData[i].meaning);
if(inputValue === correct){
correctCount++;
}
}
for(let i=0;i<quizData.length;i++){
const inputEl = document.getElementById(`ans-${i}`);
const rightEl = document.getElementById(`right-${i}`);
if(inputEl && rightEl){
const user = normalize(inputEl.value);
const correct = normalize(inputEl.dataset.answer);
inputEl.classList.remove("correct","incorrect");
if(user===correct){
inputEl.classList.add("correct");
rightEl.textContent="";
} else {
inputEl.classList.add("incorrect");
rightEl.textContent=`正解: ${correct}`;
}
}
}
const percent = ((correctCount / quizData.length) * 100).toFixed(1);
scoreEl.textContent = `得点: ${correctCount} / ${quizData.length} 正答率: ${percent}%`;
}
document.addEventListener('DOMContentLoaded', function() {
const startQuizBtn = document.getElementById("startQuizBtn");
if (startQuizBtn) {
startQuizBtn.addEventListener("click", generateQuizTable);
}
});
})();
</script>
未分類 保護中: 小テスト
このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。 パスワード:
未分類 2022年2月21日より新規生募集開始！
満席の為、昨年12月より新規生徒様の募集を停止していましたが、2月21日から新規生徒様の募集を再開いたします！ 大学受験を本格的に考え始めた高校生や、新年度に向けた対策に不安を感じている中学生や小学生の生徒さまも多いかと思います。 受験に関...