<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CEFR-J Speaking & Listening Assessment</title>
<style>
body { font-family: sans-serif; padding: 2rem; max-width: 700px; margin: auto; }
#questionBox, #summary { margin-top: 2rem; padding: 1rem; border: 1px solid #ccc; border-radius: 10px; }
button { margin: 0.5rem; padding: 0.5rem 1rem; }
input[type="text"] { padding: 0.5rem; width: 100%; margin-top: 0.5rem; }
.score-history { margin-top: 1rem; font-size: 1.2rem; }
.dot { display: inline-block; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; }
.dot-0 { background-color: red; }
.dot-5 { background-color: orange; }
.dot-10 { background-color: green; }
#traineeList { margin-top: 2rem; }
</style>
</head>
<body>
<h1>CEFR-J Assessment</h1>
<label for="trainee">Trainee Name:</label>
<input id="trainee" type="text" placeholder="Enter trainee name">
<label for="skill">Skill:</label>
<select id="skill">
<option value="speaking">Speaking</option>
<option value="listening">Listening</option>
</select>
<button onclick="startSession()">Start Assessment</button>
<div id="questionBox" style="display:none;">
<h2 id="levelLabel"></h2>
<p id="descriptor"></p>
<p id="questionText"></p>
<div>
<button onclick="score(0)">0</button>
<button onclick="score(5)">5</button>
<button onclick="score(10)">10</button>
</div>
<div class="score-history" id="scoreHistory"></div>
<button onclick="overrideLevel()">Override Level</button>
<button onclick="endSession()">End Session</button>
</div>
<div id="summary" style="display:none;"></div>
<button id="exportBtn" onclick="exportCSV()" style="display:none;">Download CSV</button>
<div id="traineeList">
<h2>Past Trainees</h2>
<ul id="traineeHistory"></ul>
</div>
<script>
let CEFRJ = {};
let csvURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTl55GZIHaWWkuwJPeGNm9wJU5n1uZfhKFOSZA6P8DfVDK-o8bMWPNzn-5laLBEnKCuYBA085ecx44T/pub?output=csv";
function loadCSVData() {
fetch(csvURL)
.then(res => res.text())
.then(csv => {
let rows = csv.trim().split("\n").slice(1); // skip header
rows.forEach(row => {
let [level, skill, descriptor, question] = row.split(/,(?=(?:[^"]*"[^"]*")*[^"]*$)/);
level = level.trim();
skill = skill.trim();
if (!CEFRJ[level]) CEFRJ[level] = { speaking: [], listening: [] };
CEFRJ[level][skill].push({ descriptor: descriptor.replace(/"/g, '').trim(), question: question.replace(/"/g, '').trim() });
});
console.log("CSV loaded:", CEFRJ);
})
.catch(err => {
alert("Could not load CEFR-J data. Check your internet or CSV link.");
console.error(err);
});
}
window.onload = loadCSVData;
</script>
</body>
</html>