<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perl基礎力確認クイズ</title>
<style>
:root {
/* Perlのロゴ（ラクダやタマネギ）をイメージした知的で落ち着いた配色 */
--primary-color: #004080; /* 深い青 */
--secondary-color: #404040; /* ダークグレー */
--correct-color: #2E8B57; /* シーグリーン */
--incorrect-color: #B22222; /* ファイアブリック */
--light-bg: #f5f7fa;
--white-bg: #ffffff;
--text-color: #333;
}
body {
font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
background-color: var(--light-bg);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px 0;
}
#container {
width: 90%;
max-width: 800px;
}
.panel {
background-color: var(--white-bg);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
margin-bottom: 20px;
border-top: 5px solid var(--primary-color);
}
.hidden {
display: none;
}
h1, h2 {
color: var(--primary-color);
margin-bottom: 1rem;
}
#question-number {
font-size: 16px;
font-weight: bold;
color: var(--secondary-color);
margin-bottom: 10px;
}
#question {
font-size: 20px;
font-weight: 600;
min-height: 60px;
margin: 15px 0 25px;
line-height: 1.6;
}
/* コード表示用 */
code {
background-color: #eee;
padding: 2px 5px;
border-radius: 3px;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
color: #d63384;
font-size: 0.9em;
}
#options {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0;
}
.option {
background: var(--white-bg);
color: var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: 6px;
padding: 15px;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.option:hover:not(:disabled) {
background-color: var(--primary-color);
color: white;
}
.option:active:not(:disabled) {
transform: scale(0.99);
}
.option:disabled {
cursor: default;
opacity: 0.7;
}
#timer-area {
margin-top: 25px;
font-size: 20px;
font-weight: bold;
color: var(--secondary-color);
}
#score {
font-size: 32px;
font-weight: bold;
color: var(--primary-color);
margin: 15px 0 25px;
}
.action-button {
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin: 5px;
}
.action-button:hover {
background-color: #003366;
}
#show-explanation-button {
background-color: var(--secondary-color);
}
#explanation-list {
text-align: left;
margin-top: 20px;
}
.explanation-item {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
.explanation-item h3 {
font-size: 16px;
margin: 0 0 10px 0;
color: var(--primary-color);
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}
.explanation-item p {
margin: 8px 0;
line-height: 1.6;
font-size: 15px;
}
.user-answer.correct {
color: var(--correct-color);
font-weight: bold;
}
.user-answer.incorrect {
color: var(--incorrect-color);
font-weight: bold;
text-decoration: line-through;
}
.comment {
margin-top: 15px;
padding: 12px;
border-radius: 4px;
font-style: normal;
font-weight: normal;
font-size: 14px;
border-left: 4px solid;
}
.comment.correct {
background-color: #e8f5e9;
border-color: var(--correct-color);
color: #1b5e20;
}
.comment.incorrect {
background-color: #ffebee;
border-color: var(--incorrect-color);
color: #b71c1c;
}
</style>
</head>
<body>
<div id="container">
<div id="quiz-area" class="panel">
<h1 id="main-title"></h1>
<div id="question-area">
<p id="question-number"></p>
<p id="question"></p>
</div>
<div id="options">
<button class="option"></button>
<button class="option"></button>
<button class="option"></button>
</div>
<div id="timer-area">
残り時間: <span id="timer">30</span>秒
</div>
</div>
<div id="result-area" class="panel hidden">
<h2 id="result-title"></h2>
<p id="result-message"></p>
<p id="score"></p>
<button id="show-explanation-button" class="action-button"></button>
<button id="restart-button" class="action-button"></button>
</div>
<div id="explanation-area" class="panel hidden">
<h2 id="explanation-title"></h2>
<div id="explanation-list"></div>
<button id="restart-button-2" class="action-button"></button>
</div>
</div>
<script>
'use strict';
// ===================================
// ① プログラムのロジック（関数定義）
// ===================================
// --- グローバル変数 ---
let quizData = [];
let userAnswers = [];
let currentShuffledOptions = [];
let currentQuestionIndex = 0;
let score = 0;
let timerInterval;
let timeLeft;
// --- DOM要素の取得 ---
const mainTitleEl = document.getElementById('main-title');
const quizAreaEl = document.getElementById('quiz-area');
const resultAreaEl = document.getElementById('result-area');
const explanationAreaEl = document.getElementById('explanation-area');
const questionNumberEl = document.getElementById('question-number');
const questionEl = document.getElementById('question');
const optionButtons = document.querySelectorAll('.option');
const timerEl = document.getElementById('timer');
const resultTitleEl = document.getElementById('result-title');
const resultMessageEl = document.getElementById('result-message');
const scoreEl = document.getElementById('score');
const showExplanationButton = document.getElementById('show-explanation-button');
const restartButtons = [document.getElementById('restart-button'), document.getElementById('restart-button-2')];
const explanationTitleEl = document.getElementById('explanation-title');
const explanationListEl = document.getElementById('explanation-list');
// --- 関数定義 ---
function shuffleArray(array) {
const newArray = [...array];
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
function startQuiz() {
// 全問題からランダムに10問出題
quizData = shuffleArray(quizConfig.allQuizData).slice(0, 10);
userAnswers = [];
currentQuestionIndex = 0;
score = 0;
quizAreaEl.classList.remove('hidden');
resultAreaEl.classList.add('hidden');
explanationAreaEl.classList.add('hidden');
showQuestion();
}
function showQuestion() {
if (currentQuestionIndex >= quizData.length) {
showResult();
return;
}
const currentQuestion = quizData[currentQuestionIndex];
questionNumberEl.textContent = `Question ${currentQuestionIndex + 1}`;
// HTMLタグが含まれる可能性があるため innerHTML を使用
questionEl.innerHTML = currentQuestion.question;
const optionsWithCorrectness = currentQuestion.options.map((optionText, index) => ({
text: optionText,
isCorrect: (index === currentQuestion.answer)
}));
currentShuffledOptions = shuffleArray(optionsWithCorrectness);
currentShuffledOptions.forEach((optionData, index) => {
optionButtons[index].textContent = optionData.text;
optionButtons[index].disabled = false;
});
startTimer();
}
function startTimer() {
timeLeft = quizConfig.timerSeconds;
timerEl.textContent = timeLeft;
clearInterval(timerInterval);
timerInterval = setInterval(() => {
timeLeft--;
timerEl.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timerInterval);
handleAnswer(-1);
}
}, 1000);
}
function handleAnswer(selectedIndex) {
clearInterval(timerInterval);
if (selectedIndex === -1) {
userAnswers.push({ text: "Time Out", isCorrect: false });
} else {
userAnswers.push(currentShuffledOptions[selectedIndex]);
}
if (selectedIndex !== -1 && currentShuffledOptions[selectedIndex].isCorrect) {
score++;
}
optionButtons.forEach(button => { button.disabled = true; });
setTimeout(() => {
currentQuestionIndex++;
showQuestion();
}, 500);
}
function showResult() {
quizAreaEl.classList.add('hidden');
resultAreaEl.classList.remove('hidden');
scoreEl.textContent = `正答数: ${score} / 10`;
}
function showExplanations() {
resultAreaEl.classList.add('hidden');
explanationAreaEl.classList.remove('hidden');
explanationListEl.innerHTML = '';
quizData.forEach((q, index) => {
const userAnswer = userAnswers[index];
const isCorrect = userAnswer.isCorrect;
const commentArray = isCorrect ? quizConfig.correctComments : quizConfig.incorrectComments;
const randomComment = commentArray[Math.floor(Math.random() * commentArray.length)];
const explanationHTML = `
<div class="explanation-item">
<h3>Q${index + 1}: ${q.question}</h3>
<p>あなたの回答: <span class="user-answer ${isCorrect ? 'correct' : 'incorrect'}">${userAnswer.text}</span></p>
<p>正解: <strong>${q.options[q.answer]}</strong></p>
<p><strong>【解説】</strong>: ${q.explanation}</p>
<div class="comment ${isCorrect ? 'correct' : 'incorrect'}">フィードバック: ${randomComment}</div>
</div>
`;
explanationListEl.innerHTML += explanationHTML;
});
}
function applyTheme(config) {
document.title = config.title;
mainTitleEl.textContent = config.title;
resultTitleEl.textContent = config.resultTitle;
resultMessageEl.textContent = config.resultMessage;
explanationTitleEl.textContent = config.explanationTitle;
showExplanationButton.textContent = config.showExplanationButtonText;
restartButtons.forEach(button => button.textContent = config.restartButtonText);
}
function initializeQuiz(config) {
applyTheme(config);
optionButtons.forEach((button, index) => button.addEventListener('click', () => handleAnswer(index)));
restartButtons.forEach(button => button.addEventListener('click', startQuiz));
showExplanationButton.addEventListener('click', showExplanations);
startQuiz();
}
// ===================================
// ② テーマ別データベース (Perl編)
// ===================================
const quizConfig = {
title: "Perl Programming Quiz (Beginner)",
resultTitle: "採点終了",
resultMessage: "学習成果を確認してください。",
explanationTitle: "解説・フィードバック",
showExplanationButtonText: "解説を確認する",
restartButtonText: "再挑戦",
timerSeconds: 30, // 30秒に変更
correctComments: [
"正解です。論理的かつ正確な判断です。",
"素晴らしい。基礎概念が正しく構築されています。",
"その通りです。インタプリタも満足することでしょう。",
"完璧です。この調子で学習を継続してください。",
"正解。文法的な曖昧さは見られません。",
"よく理解しています。特筆すべき成果です。",
"正解です。非常に効率的な思考プロセスです。",
"見事です。エラーログに出る幕はありません。",
"その通り。期待通りの戻り値です。",
"正解です。コードの可読性と同様、あなたの理解も明快です。"
],
incorrectComments: [
"不正解です。ドキュメントの再確認を推奨します。",
"惜しいですが、誤りです。変数のスコープや型を意識してください。",
"正しくありません。構文規則を厳密に適用する必要があります。",
"誤りです。基礎的な概念に誤解があるようです。",
"不正解です。しかし、デバッグこそが学習の近道です。",
"違います。コンパイルエラーに相当する選択です。",
"不正解。文脈（コンテキスト）の解釈を見直しましょう。",
"誤りです。Perlの哲学「TMTOWTDI」も、この場合は適用されません。",
"正解ではありません。リファレンスを確認することをお勧めします。",
"不正解です。ここでの躓きは、深い理解への足掛かりとなります。"
],
allQuizData: [
// --- 変数とシジル ---
{ question: "Perlにおいて、スカラー変数を表すシジル（接頭辞）はどれですか？", options: ["$", "@", "%"], answer: 0, explanation: "スカラー変数（単一の値）は <code>$</code> で始まります。例: <code>$name</code>" },
{ question: "Perlにおいて、配列を表すシジルはどれですか？", options: ["$", "@", "%"], answer: 1, explanation: "配列（順序付けられたリスト）は <code>@</code> で始まります。例: <code>@colors</code>" },
{ question: "Perlにおいて、ハッシュ（連想配列）を表すシジルはどれですか？", options: ["&", "@", "%"], answer: 2, explanation: "ハッシュ（キーと値のペア）は <code>%</code> で始まります。例: <code>%scores</code>" },
{ question: "配列 <code>@array</code> の3番目の要素にアクセスする正しい構文はどれですか？", options: ["$array[2]", "@array[2]", "$array[3]"], answer: 0, explanation: "配列の個々の要素はスカラーであるため、<code>$</code> を使い、インデックスは0から始まるため3番目は <code>[2]</code> となります。" },
{ question: "ハッシュ <code>%hash</code> のキー 'foo' に対応する値にアクセスする正しい構文はどれですか？", options: ["@hash{'foo'}", "$hash{'foo'}", "%hash{'foo'}"], answer: 1, explanation: "ハッシュの個々の値もスカラーであるため、<code>$</code> を使い、キーは波括弧 <code>{}</code> で囲みます。" },
// --- 文字列と数値 ---
{ question: "文字列を連結するための演算子はどれですか？", options: ["+", ".", "&"], answer: 1, explanation: "Perlでは文字列の連結にドット <code>.</code> 演算子を使用します。<code>+</code> は数値の加算です。" },
{ question: "文字列を繰り返すための演算子はどれですか？", options: ["*", "x", "r"], answer: 1, explanation: "<code>x</code> 演算子は、左辺の文字列を右辺の回数だけ繰り返します。例: <code>'Go' x 3</code> は 'GoGoGo' になります。" },
{ question: "シングルクォート <code>' '</code> とダブルクォート <code>\" \"</code> の主な違いは何ですか？", options: ["違いはない", "シングルクォートは変数展開を行わない", "ダブルクォートは変数展開を行わない"], answer: 1, explanation: "ダブルクォート内では変数が展開され、特殊文字（\\nなど）が解釈されますが、シングルクォート内では文字通りに扱われます。" },
{ question: "数値として等しいかを比較する演算子はどれですか？", options: ["=", "eq", "=="], answer: 2, explanation: "数値の等価比較には <code>==</code> を使用します。<code>eq</code> は文字列比較、<code>=</code> は代入です。" },
{ question: "文字列として等しいかを比較する演算子はどれですか？", options: ["==", "eq", "equals"], answer: 1, explanation: "文字列の等価比較には <code>eq</code> (equal) を使用します。" },
{ question: "数値の「より大きい」比較は <code>></code> ですが、文字列の「より大きい（辞書順）」比較はどれですか？", options: [">", "gt", "ge"], answer: 1, explanation: "文字列比較の演算子は英字で表現されます。greater than なので <code>gt</code> です。" },
// --- コンテキストと特殊変数 ---
{ question: "配列をスカラーコンテキスト（例: <code>$count = @array;</code>）で評価すると何が返されますか？", options: ["最初の要素", "最後の要素", "要素数"], answer: 2, explanation: "配列をスカラーコンテキストで評価すると、その配列の要素数が返されます。" },
{ question: "Perlのデフォルト変数（引数を省略した場合などに使われる変数）はどれですか？", options: ["$_", "$0", "$ARGV"], answer: 0, explanation: "<code>$_</code> はデフォルト変数として、ループ内や関数で引数が省略された場合に暗黙的に使用されます。" },
{ question: "コマンドライン引数が格納される配列はどれですか？", options: ["@ARGV", "@ARGS", "@_"], answer: 0, explanation: "スクリプト実行時に渡された引数は <code>@ARGV</code> 配列に格納されます。" },
{ question: "サブルーチン（関数）に渡された引数が格納される配列はどれですか？", options: ["@ARGV", "@PARAM", "@_"], answer: 2, explanation: "サブルーチン内では、引数は特殊配列 <code>@_</code> に格納されています。" },
{ question: "現在行われている処理のエラーメッセージ（dieなど）を格納する変数は？", options: ["$!", "$@", "$?"], answer: 1, explanation: "<code>eval</code> ブロック内でエラーが発生した際、そのエラーメッセージは <code>$@</code> に格納されます。システムエラー（ファイルが開けない等）は <code>$!</code> です。" },
// --- 制御構文 ---
{ question: "「条件が偽（false）である間」実行する後置修飾子はどれですか？", options: ["if", "while", "unless"], answer: 2, explanation: "<code>unless</code> は <code>if (not ...)</code> と同義で、条件が偽の場合に処理を実行します。" },
{ question: "ループ処理を直ちに終了し、ループの外へ抜けるコマンドはどれですか？", options: ["break", "last", "exit"], answer: 1, explanation: "Perlでは、C言語などの <code>break</code> に相当するコマンドは <code>last</code> です。" },
{ question: "ループの現在の反復をスキップし、次の反復へ進む（continue相当）コマンドはどれですか？", options: ["next", "skip", "continue"], answer: 0, explanation: "<code>next</code> コマンドは、ループの残りの処理をスキップして次の反復を開始します。" },
{ question: "<code>foreach</code> ループで、リストの各要素を順に格納する変数を省略した場合、どの変数が使われますか？", options: ["$item", "$i", "$_"], answer: 2, explanation: "制御変数を省略すると、デフォルト変数 <code>$_</code> に各要素が代入されます。" },
// --- 入出力と関数 ---
{ question: "標準入力から1行読み込むための記述はどれですか？", options: ["<STDIN>", "read()", "input()"], answer: 0, explanation: "ダイヤモンド演算子 <code><></code> を使い、ファイルハンドル <code>STDIN</code> を指定することで標準入力から読み込みます。" },
{ question: "文字列の末尾にある改行文字を取り除く関数はどれですか？", options: ["chop", "chomp", "strip"], answer: 1, explanation: "<code>chomp</code> は文字列の末尾にある入力レコード区切り文字（通常は改行）を安全に取り除きます。" },
{ question: "配列の末尾に要素を追加する関数はどれですか？", options: ["push", "unshift", "add"], answer: 0, explanation: "<code>push</code> は配列の最後に要素を追加します。<code>unshift</code> は先頭に追加します。" },
{ question: "配列の末尾から要素を取り出す（削除する）関数はどれですか？", options: ["pop", "shift", "delete"], answer: 0, explanation: "<code>pop</code> は配列の最後の要素を取り出して返します。配列の要素数は1つ減ります。" },
{ question: "配列の先頭から要素を取り出す関数はどれですか？", options: ["pop", "shift", "remove"], answer: 1, explanation: "<code>shift</code> は配列の最初の要素を取り出します。他の要素は前に詰められます。" },
{ question: "配列を特定の区切り文字で連結して文字列にする関数はどれですか？", options: ["split", "join", "concat"], answer: 1, explanation: "<code>join</code> 関数は、リストの要素を指定した区切り文字で結合して1つの文字列にします。" },
{ question: "文字列を指定したパターンで分割してリストにする関数はどれですか？", options: ["split", "join", "explode"], answer: 0, explanation: "<code>split</code> 関数は、文字列をパターン（正規表現など）で分割します。" },
{ question: "ハッシュのすべての「キー」をリストとして返す関数はどれですか？", options: ["keys", "values", "each"], answer: 0, explanation: "<code>keys</code> 関数はハッシュに含まれる全てのキーをリストとして返します。" },
{ question: "ハッシュに特定のキーが存在するかどうかを確認する関数はどれですか？", options: ["defined", "exists", "isset"], answer: 1, explanation: "<code>exists</code> 関数は、ハッシュ要素の値が未定義であっても、キー自体が存在すれば真を返します。" },
// --- 正規表現 ---
{ question: "変数が正規表現にマッチするかを判定する演算子はどれですか？", options: ["=", "==", "=~"], answer: 2, explanation: "バインディング演算子 <code>=~</code> を使用して、左辺の文字列と右辺のパターンマッチを行います。" },
{ question: "変数が正規表現にマッチ「しない」ことを判定する演算子はどれですか？", options: ["!=~", "!~", "not~"], answer: 1, explanation: "<code>!~</code> 演算子は、パターンにマッチしない場合に真を返します。" },
{ question: "正規表現で「任意の1文字」を表すメタ文字はどれですか？", options: ["*", ".", "?"], answer: 1, explanation: "ドット <code>.</code> は改行を除く任意の1文字にマッチします。" },
{ question: "正規表現で「0回以上の繰り返し」を表すメタ文字はどれですか？", options: ["*", "+", "?"], answer: 0, explanation: "アスタリスク <code>*</code> は直前の文字の0回以上の繰り返しにマッチします。" },
{ question: "正規表現で「1回以上の繰り返し」を表すメタ文字はどれですか？", options: ["*", "+", "?"], answer: 1, explanation: "プラス <code>+</code> は直前の文字の1回以上の繰り返しにマッチします。" },
{ question: "正規表現で行の先頭を表すアンカーはどれですか？", options: ["^", "$", "\\A"], answer: 0, explanation: "キャレット <code>^</code> は行の先頭にマッチします。" },
{ question: "正規表現で置換を行う演算子はどれですか？", options: ["m//", "s///", "tr///"], answer: 1, explanation: "<code>s/PATTERN/REPLACEMENT/</code> の形式で置換を行います。<code>m//</code> はマッチ、<code>tr///</code> は文字変換です。" },
// --- お作法・その他 ---
{ question: "Perlスクリプトの冒頭に記述し、変数の宣言強制など厳密な文法チェックを有効にするプラグマは？", options: ["use strict;", "use warnings;", "use grammar;"], answer: 0, explanation: "<code>use strict;</code> は、変数の宣言（my）を強制するなど、安全なコーディングのために必須とされるプラグマです。" },
{ question: "変数のスコープをレキシカル（そのブロック内のみ）に限定するために使うキーワードは？", options: ["local", "my", "our"], answer: 1, explanation: "<code>my</code> で宣言された変数は、そのブロック（波括弧）内でのみ有効なレキシカル変数となります。" },
{ question: "Perlのモジュールが集約されている巨大なアーカイブネットワークの名称は？", options: ["CPAN", "PerlHub", "Pypi"], answer: 0, explanation: "CPAN (Comprehensive Perl Archive Network) は、Perlのライブラリやモジュールが蓄積されているリポジトリです。" },
{ question: "コードの実行を停止し、エラーメッセージを表示して終了する関数は？", options: ["stop", "kill", "die"], answer: 2, explanation: "<code>die</code> 関数は、プログラムの実行を中断し、指定されたメッセージを標準エラー出力に出力します。" },
{ question: "Perlのモットー「TMTOWTDI」の意味は？", options: ["やり方は1つだけではない", "コードは短く書くべきだ", "テストが全てだ"], answer: 0, explanation: "There's More Than One Way To Do It（やり方はひとつじゃない）は、Perlの多様性を象徴するスローガンです。" },
{ question: "Perlにおいて、文（ステートメント）の区切り文字はどれですか？", options: [":", ";", "."], answer: 1, explanation: "Perlの各文はセミコロン <code>;</code> で終了する必要があります。" },
{ question: "Perlにおけるコメントアウトの開始文字はどれですか？", options: ["//", "#", "--"], answer: 1, explanation: "Perlでは <code>#</code> から行末までがコメントとして扱われます。" },
{ question: "サブルーチン（関数）を定義するためのキーワードはどれですか？", options: ["function", "def", "sub"], answer: 2, explanation: "Perlでは <code>sub</code> キーワードを使ってサブルーチンを定義します。" },
{ question: "サブルーチンから値を返すために使うキーワードはどれですか？", options: ["ret", "return", "back"], answer: 1, explanation: "<code>return</code> を使用して値を返します。省略した場合は最後に評価された式の値が返されます。" },
// --- 追加の基礎問題 ---
{ question: "<code>1 .. 10</code> という記述は何を表しますか？", options: ["1から10までの範囲演算子", "1と10の連結", "小数点演算"], answer: 0, explanation: "範囲演算子 <code>..</code> は、左辺から右辺までの値のリストを生成します。" },
{ question: "<code>unless ($x)</code> は、どのように書き換えられますか？", options: ["if ($x)", "if (!$x)", "while ($x)"], answer: 1, explanation: "<code>unless</code> は「もし〜でなければ」という意味なので、<code>if</code> 文で否定 <code>!</code> を使うのと等価です。" },
{ question: "ハッシュ <code>%data</code> を初期化する一般的な記述はどれですか？", options: ["%data = ('key', 'value');", "%data = ['key', 'value'];", "%data = {key => 'value'};"], answer: 0, explanation: "ハッシュはリスト <code>()</code> で初期化します。<code>=></code> (ファットカンマ) を使うと <code>('key', 'value')</code> と同じ意味で見やすくなります。" },
{ question: "<code>my $ref = \\$scalar;</code> におけるバックスラッシュ <code>\\</code> の役割は？", options: ["エスケープ", "リファレンスの作成", "除算"], answer: 1, explanation: "変数の前に <code>\\</code> を置くと、その変数のリファレンス（参照）を作成します。" },
{ question: "リファレンス <code>$array_ref</code> が指す配列の要素にアクセスする記法は？", options: ["$array_ref[0]", "$array_ref->[0]", "@array_ref[0]"], answer: 1, explanation: "リファレンス経由のアクセス（デリファレンス）には矢印演算子 <code>-></code> を使用します。" },
{ question: "<code>qw( apple banana cherry )</code> の意味は？", options: ["文字列のクォート演算子", "関数の呼び出し", "コメント"], answer: 0, explanation: "<code>qw</code> (quote word) は、空白で区切られた単語のリストを生成します。<code>('apple', 'banana', 'cherry')</code> と同義です。" },
{ question: "<code>print \"Hello\\n\";</code> における <code>\\n</code> は何を表しますか？", options: ["タブ", "改行", "ヌル文字"], answer: 1, explanation: "<code>\\n</code> は改行文字（newline）を表すエスケープシーケンスです。" },
{ question: "次のうち、Perl 5.10以降で使用可能な、改行付きで出力する関数は？", options: ["echo", "puts", "say"], answer: 2, explanation: "<code>say</code> 関数は <code>print</code> と同様に出力しますが、末尾に自動的に改行を追加します（<code>use feature 'say';</code> 等が必要）。" },
{ question: "論理演算子「AND」を表すものはどれですか？", options: ["&&", "||", "!"], answer: 0, explanation: "<code>&&</code> または <code>and</code> は論理積（AND）を表します。" },
{ question: "論理演算子「OR」を表すものはどれですか？", options: ["&&", "||", "!"], answer: 1, explanation: "<code>||</code> または <code>or</code> は論理和（OR）を表します。" },
{ question: "<code>$count++</code> の動作として正しいものは？", options: ["$countの値を使ってから1増やす", "$countを1増やしてから値を使う", "$countを2倍にする"], answer: 0, explanation: "後置インクリメント <code>++</code> は、現在の値を返した後に変数の値を1増やします。" },
{ question: "<code>reverse</code> 関数の役割は？", options: ["文字列を反転する", "リストの順序を逆にする", "両方（コンテキストによる）"], answer: 2, explanation: "<code>reverse</code> はリストコンテキストでは要素の順序を逆にし、スカラーコンテキストでは文字列を反転します。" },
{ question: "ハッシュの要素を削除する関数は？", options: ["remove", "unset", "delete"], answer: 2, explanation: "<code>delete $hash{$key}</code> のように使い、指定したキーと値のペアをハッシュから削除します。" },
{ question: "<code>__END__</code> トークンの意味は？", options: ["プログラムの論理的な終了を示す", "エラーで終了する", "ループを終了する"], answer: 0, explanation: "<code>__END__</code> 以降の行はコンパイラによって無視されます。データやドキュメントを記述するのによく使われます。" },
{ question: "次のうち、Perlで「偽」と判定される値はどれですか？", options: ["\"0\"", "\"00\"", "undefinedでないリファレンス"], answer: 0, explanation: "Perlでは、数値の0、文字列の '0'、空文字 ''、未定義値 undef、空リスト () が偽とみなされます。'00' は真です。" },
{ question: "<code>uc($string)</code> 関数は何をしますか？", options: ["小文字にする", "大文字にする", "文字コードを返す"], answer: 1, explanation: "<code>uc</code> (uppercase) は文字列を大文字に変換します。小文字にするのは <code>lc</code> です。" },
{ question: "<code>length($string)</code> 関数は何を返しますか？", options: ["バイト数", "文字数", "単語数"], answer: 1, explanation: "<code>length</code> は文字列の文字数を返します。" },
{ question: "<code>index($str, $substr)</code> 関数は何をしますか？", options: ["部分文字列の位置を返す", "配列の要素を返す", "文字列を分割する"], answer: 0, explanation: "<code>index</code> は、指定した部分文字列が最初に出現する位置（インデックス）を返します。見つからない場合は -1 を返します。" },
{ question: "<code>local</code> 修飾子の説明として正しいのは？", options: ["レキシカルスコープ変数を作る", "グローバル変数の値を一時的に退避・変更する", "定数を作る"], answer: 1, explanation: "<code>local</code> は変数を新たに作成するのではなく、既存のグローバル変数の値をブロック内でのみ一時的に変更（動的スコープ）します。" },
{ question: "<code>use feature 'say';</code> を使わずに、古いPerlでも <code>say</code> と同様のことをするには？", options: ["print \"...\\n\"", "echo \"...\"", "write \"...\""], answer: 0, explanation: "<code>say</code> は実質的に <code>print</code> の末尾に改行を加えたものなので、<code>print \"...\\n\"</code> と等価です。" },
{ question: "ファイルを開くための関数は？", options: ["fopen", "open", "file"], answer: 1, explanation: "<code>open(my $fh, '<', 'file.txt')</code> のように、<code>open</code> 関数を使用してファイルハンドルを作成します。" },
{ question: "開いたファイルを閉じるための関数は？", options: ["close", "fclose", "end"], answer: 0, explanation: "<code>close($fh)</code> でファイルハンドルを閉じます。" },
{ question: "Unix系システムにおいて、スクリプトの1行目に書く <code>#!/usr/bin/perl</code> を何と呼ぶ？", options: ["シバン (Shebang)", "ヘッダー", "プラグマ"], answer: 0, explanation: "シバン行は、そのスクリプトを実行するためのインタプリタを指定します。" },
{ question: "サブルーチンの引数を <code>my ($x, $y) = @_;</code> で受け取る方法は一般的ですが、<code>shift</code> を使うとどうなりますか？", options: ["引数が逆順になる", "引数を1つずつ取り出す", "エラーになる"], answer: 1, explanation: "<code>my $x = shift;</code> とすると、<code>@_</code> の先頭から1つずつ値を取り出して変数に代入します。" },
{ question: "<code>map</code> 関数の主な用途は？", options: ["リストの各要素に対して処理を行い、新しいリストを作る", "条件に合う要素だけを抽出する", "リストを並べ替える"], answer: 0, explanation: "<code>map { 処理 } @list</code> は、リストの全要素に対してブロック内の処理を適用し、その結果のリストを返します。" },
{ question: "<code>grep</code> 関数の主な用途は？", options: ["リストの各要素を変換する", "条件に合う要素だけを抽出する", "ファイルを検索する"], answer: 1, explanation: "<code>grep { 条件 } @list</code> は、ブロック内の条件が真になる要素のみを抽出してリストとして返します。" },
{ question: "<code>sort</code> 関数で数値を昇順にソートするブロックは？", options: ["{ $a cmp $b }", "{ $a <=> $b }", "{ $a - $b }"], answer: 1, explanation: "数値比較演算子 <code><=></code> (宇宙船演算子) を使用します。<code>cmp</code> は文字列比較用です。" },
{ question: "ハッシュ <code>%env</code> のすべての値を削除する（空にする）方法は？", options: ["undef %env", "%env = ()", "delete %env"], answer: 1, explanation: "<code>%env = ();</code> と空リストを代入することで、ハッシュをクリアできます。" },
{ question: "Perl 5において、オブジェクト指向プログラミングにおける「クラス」の実体は何ですか？", options: ["パッケージ (package)", "ストラクチャ (struct)", "専用のclass構文"], answer: 0, explanation: "従来のPerl OOでは、<code>package</code> がクラスとして機能し、<code>bless</code> されたリファレンスがオブジェクトとなります（※新しいPerlではclass構文も導入されつつあります）。" }
]
};
// ===================================
// ③ 実行命令
// ===================================
document.addEventListener('DOMContentLoaded', () => {
initializeQuiz(quizConfig);
});
</script>
</body>
</html>
使用変数
| $count | |
| $ref | |
| $x | |
| %data | |
| %env | |
| , "def", "sub"], answer: 2, explanation: "Perlでは <code>sub</code> キーワードを使ってサブルーチンを定義します。" },{ question: "サブルーチンから値を返すために使うキーワードはどれですか？", options: ["ret", "return", "back"], answer: 1, explanation: "<code>return</code> を使用して値を返します。省略した場合は最後に評価された式の値が返されます。" },// --- 追加の基礎問題 ---{ question: "<code>1 .. 10</code> という記述は何を表しますか？", options: ["1から10までの範囲演算子", "1と10の連結", "小数点演算"], answer: 0, explanation: "範囲演算子 <code>..</code> は、左辺から右辺までの値のリストを生成します。" },{ question: "<code>unless -------( Function ) | |
| applyTheme -------( Function ) | |
| button | |
| charset | |
| class | |
| commentArray | |
| content | |
| currentQuestion | |
| disabled | |
| entShuffledOptions | |
| explanationAreaEl | |
| explanationHTML | |
| explanationListEl | |
| explanationTitleEl | |
| handleAnswer -------( Function ) | |
| i | |
| id | |
| index | |
| initializeQuiz -------( Function ) | |
| innerHTML | |
| isCorrect | |
| j | |
| key | |
| lang | |
| mainTitleEl | |
| name | |
| newArray | |
| onsWithCorrectness | |
| optionButtons | |
| questionEl | |
| questionNumberEl | |
| quizAreaEl | |
| quizConfig | |
| quizData | |
| randomComment | |
| restartButtons | |
| resultAreaEl | |
| resultMessageEl | |
| resultTitleEl | |
| rrentQuestionIndex | |
| scale | |
| score | |
| scoreEl | |
| selectedIndex | |
| showExplanations -------( Function ) | |
| showQuestion -------( Function ) | |
| showResult -------( Function ) | |
| shuffleArray -------( Function ) | |
| startQuiz -------( Function ) | |
| startTimer -------( Function ) | |
| textContent | |
| timeLeft | |
| timerEl | |
| timerInterval | |
| title | |
| userAnswer | |
| userAnswers | |
| wExplanationButton | |
| width |