お問い合わせフォーム
// ページのDOM（HTML）が読み込まれたら実行
document.addEventListener('DOMContentLoaded', function() {
// ------------------------------------------------
// ▼ 管理エリア ▼
// ------------------------------------------------
// 【1】もし .hallo-training-container がページ内にあれば
if (document.querySelector('.hallo-training-container')) {
// ハロートレーニング用の初期化関数を実行
initializeHalloTraining();
}
// 【2】もし .calculator-container がページ内にあれば
if (document.querySelector('.calculator-container')) {
// 計算機用の初期化関数を実行
initializeCalculator();
}
// 【3】もし、また別の機能があれば、ここに追加...
// if (document.querySelector('.another-feature')) {
// initializeAnotherFeature();
// }
// ------------------------------------------------
// ▼ 以下に、各機能の「実行関数」を定義していく ▼
// ------------------------------------------------
/**
* 【1】ハロートレーニング用の実行関数
*/
function initializeHalloTraining() {
let initAttempts = 0;
function pollForHalloTraining() {
initAttempts++;
const container = document.querySelector('.hallo-training-container');
// Chart.jsが未定義 または コンテナが見つからない
if (!container || typeof Chart === 'undefined') {
if (initAttempts < 50) {
setTimeout(pollForHalloTraining, 100);
}
return;
}
// --- ここから下に、前回貼り付けたJSの中身を（ほぼ）そのままコピー ---
const sections = container.querySelectorAll('.app-section');
const navButtons = container.querySelectorAll('.nav-btn');
if (sections.length === 0 || navButtons.length === 0) return;
let benefitChartInstance = null;
const quizData = [
{ question: "雇用保険を受給できない人が、月10万円の給付金を受けながら訓練できる制度はどれ？", options: ["公共職業訓練", "求職者支援訓練", "専門実践教育訓練"], answer: "求職者支援訓練" },
{ question: "職業訓練受講給付金の「本人収入」の支給要件は？", options: ["月8万円以下", "月10万円以下", "月12万円以下"], answer: "月8万円以下" },
{ question: "受講費用の最大70%が支給され、受講前にキャリアコンサルティングが必須なのはどれ？", options: ["一般教育訓練", "特定一般教育訓練", "専門実践教育訓練"], answer: "専門実践教育訓練" },
{ question: "「訓練延長給付」の対象となる可能性があるのは、どの制度の利用者？", options: ["公共職業訓練", "求職者支援訓練", "教育訓練給付制度"], answer: "公共職業訓練" }
];
let currentQuestionIndex = 0;
const navigateTo = (targetId) => { /* ...（以下、前回のコード）... */
if (!targetId) return;
sections.forEach(section => {
section.style.display = section.id === targetId ? 'block' : 'none';
});
navButtons.forEach(button => {
button.classList.toggle('active', button.dataset.target === targetId);
});
if (targetId === 'education-benefit') renderBenefitChart();
if (targetId === 'quiz') startQuiz();
};
const mainNav = container.querySelector('#main-nav');
if(mainNav) {
mainNav.addEventListener('click', (e) => {
if (e.target.matches('.nav-btn') && e.target.dataset.target) {
navigateTo(e.target.dataset.target);
}
});
}
container.querySelectorAll('[data-navigate-to]').forEach(button => {
button.addEventListener('click', () => {
if (button.dataset.navigateTo) {
navigateTo(button.dataset.navigateTo);
}
});
});
const incomeSlider = container.querySelector('#income'),
householdIncomeSlider = container.querySelector('#householdIncome'),
assetsSlider = container.querySelector('#assets');
const incomeValue = container.querySelector('#incomeValue'),
householdIncomeValue = container.querySelector('#householdIncomeValue'),
assetsValue = container.querySelector('#assetsValue');
const eligibilityResult = container.querySelector('#eligibilityResult');
function checkEligibility() {
if(!incomeSlider || !householdIncomeSlider || !assetsSlider ||
!incomeValue || !householdIncomeValue || !assetsValue ||
!eligibilityResult) {
return;
}
const income = parseInt(incomeSlider.value),
householdIncome = parseInt(householdIncomeSlider.value),
assets = parseInt(assetsSlider.value);
incomeValue.textContent = `${income}万円`;
householdIncomeValue.textContent = `${householdIncome}万円`;
assetsValue.textContent = `${assets}万円`;
const meetsIncome = income <= 8,
meetsHouseholdIncome = householdIncome <= 25,
meetsAssets = assets <= 300;
let messages = [];
if (!meetsIncome) messages.push("本人の月収が8万円を超えています。");
if (!meetsHouseholdIncome) messages.push("世帯の月収が25万円を超えています。");
if (!meetsAssets) messages.push("世帯の金融資産が300万円を超えています。");
if (meetsIncome && meetsHouseholdIncome && meetsAssets) {
eligibilityResult.innerHTML = `🎉 支給対象の可能性があります！
他の要件も満たせば、給付金を受給できる可能性があります。詳しくはハローワークにご相談ください。
`;
eligibilityResult.className = 'text-center p-6 rounded-lg transition-colors duration-300 bg-green-50';
} else {
eligibilityResult.innerHTML = `⚠️ 支給対象外のようです
${messages.map(msg => `- ${msg}
`).join('')}
`;
eligibilityResult.className = 'text-center p-6 rounded-lg transition-colors duration-300 bg-red-50';
}
}
if(incomeSlider && householdIncomeSlider && assetsSlider) {
[incomeSlider, householdIncomeSlider, assetsSlider].forEach(slider => slider.addEventListener('input', checkEligibility));
}
function renderBenefitChart() {
const chartEl = container.querySelector('#benefitChart');
if(!chartEl || typeof Chart === 'undefined') return;
if (benefitChartInstance) benefitChartInstance.destroy();
const ctx = chartEl.getContext('2d');
benefitChartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: ['専門実践教育訓練', '特定一般教育訓練', '一般教育訓練'],
datasets: [{
label: '最大給付率 (%)', data: [70, 40, 20],
backgroundColor: ['rgba(168, 85, 247, 0.6)', 'rgba(59, 130, 246, 0.6)', 'rgba(34, 197, 94, 0.6)'],
borderColor: ['rgb(168, 85, 247)', 'rgb(59, 130, 246)', 'rgb(34, 197, 94)'],
borderWidth: 1
}]
},
options: {
responsive: true, maintainAspectRatio: false, indexAxis: 'y',
plugins: {
legend: { display: false },
title: { display: true, text: '教育訓練給付制度の種類別 最大給付率', font: { size: 16 } },
tooltip: { callbacks: { label: (c) => `${c.dataset.label || ''}: ${c.parsed.x}%` } }
},
scales: { x: { beginAtZero: true, max: 100, title: { display: true, text: '給付率 (%)' } } }
}
});
}
function startQuiz() { /* ...（以下、前回のコード）... */
currentQuestionIndex = 0;
showQuestion();
}
function showQuestion() {
const q = quizData[currentQuestionIndex];
const qText = container.querySelector('#question-text');
const optsContainer = container.querySelector('#options-container');
const feedbackEl = container.querySelector('#quiz-feedback');
const nextBtnEl = container.querySelector('#next-question-btn');
const counterEl = container.querySelector('#question-counter');
if(!q || !qText || !optsContainer || !feedbackEl || !nextBtnEl || !counterEl) return;
qText.textContent = q.question;
optsContainer.innerHTML = '';
q.options.forEach(option => {
const btn = document.createElement('button');
btn.textContent = option;
btn.className = 'quiz-option block w-full text-left p-4 border rounded-lg cursor-pointer transition';
btn.addEventListener('click', () => selectAnswer(option, q.answer));
optsContainer.appendChild(btn);
});
feedbackEl.innerHTML = '';
nextBtnEl.style.display = 'none';
counterEl.textContent = `問題 ${currentQuestionIndex + 1} / ${quizData.length}`;
}
function selectAnswer(selected, correct) { /* ...（以下、前回のコード）... */
container.querySelectorAll('.quiz-option').forEach(opt => {
opt.disabled = true;
if (opt.textContent === correct) opt.classList.add('correct');
else if (opt.textContent === selected) opt.classList.add('incorrect');
});
const feedback = container.querySelector('#quiz-feedback');
if(!feedback) return;
if (selected === correct) {
feedback.textContent = '正解です！素晴らしい！';
feedback.className = 'mt-6 text-center font-medium text-green-600';
} else {
feedback.textContent = `残念！正解は「${correct}」です。`;
feedback.className = 'mt-6 text-center font-medium text-red-600';
}
const nextBtn = container.querySelector('#next-question-btn');
if(!nextBtn) return;
nextBtn.style.display = 'block';
if (currentQuestionIndex === quizData.length - 1) {
nextBtn.textContent = '結果を見る';
nextBtn.onclick = showResults;
} else {
nextBtn.textContent = '次の問題へ';
nextBtn.onclick = nextQuestion;
}
}
function nextQuestion() {
currentQuestionIndex++;
showQuestion();
}
function showResults() {
const contentEl = container.querySelector('#quiz-content');
const feedbackEl = container.querySelector('#quiz-feedback');
const nextBtnEl = container.querySelector('#next-question-btn');
if(!contentEl || !feedbackEl || !nextBtnEl) return;
contentEl.innerHTML = `クイズ終了！
お疲れ様でした。これで公的職業訓練の基本はバッチリですね！
繰り返し復習して、知識を定着させましょう。
`;
feedbackEl.innerHTML = '';
nextBtnEl.textContent = 'もう一度挑戦する';
nextBtnEl.onclick = startQuiz;
}
// --- 初期化処理 ---
navigateTo('overview');
checkEligibility();
} // initializeHalloTraining 関数の終わり
// ポーリング（監視）を開始
pollForHalloTraining();
}
/**
* 【2】計算機用の実行関数
*/
function initializeCalculator() {
// この中に、計算機（.calculator-container）用の
// JavaScriptコードを貼り付ける
console.log("計算機（.calculator-container）が見つかりました。");
// const calculator = document.querySelector('.calculator-container');
// ...（計算機用の処理）...
}
});