I’m messing around with Copilot now. Here is a quiz I made to test your knowledge of the Australian energy sector.
I’m still trying to work out how to host apps made with Copilot without using a third party hosting site like Netlify. This seems to be an advantage of Claude. Copy the below html code to a html online viewer like this one.
Time to make – 5 minutes
Time to fact check – 5 minutes
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Australian Energy Sector Quiz</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0b1020;
color: #f5f5f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}
.app {
background: #151a30;
margin: 32px 16px;
padding: 24px 20px 28px;
border-radius: 12px;
max-width: 720px;
width: 100%;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.06);
}
h1 {
margin-top: 0;
font-size: 1.6rem;
letter-spacing: 0.03em;
}
.subtitle {
margin-top: 4px;
margin-bottom: 18px;
color: #c3c7f5;
font-size: 0.95rem;
}
.level-select {
margin-bottom: 18px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.level-select label {
font-size: 0.9rem;
color: #d0d3ff;
}
select {
background: #101426;
color: #f5f5f5;
border-radius: 6px;
border: 1px solid #2f365f;
padding: 6px 10px;
font-size: 0.9rem;
outline: none;
}
select:focus {
border-color: #4f8cff;
box-shadow: 0 0 0 1px rgba(79, 140, 255, 0.4);
}
.question-card {
margin-top: 10px;
padding: 16px 14px 18px;
border-radius: 10px;
background: #101426;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.question-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.question-number {
font-size: 0.85rem;
color: #9ea4d8;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.question-text {
margin: 4px 0 10px;
font-size: 1rem;
line-height: 1.4;
}
.options {
list-style: none;
padding: 0;
margin: 0;
}
.options li {
margin-bottom: 8px;
}
.option-btn {
width: 100%;
text-align: left;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid #262c4f;
background: #151a30;
color: #f5f5f5;
font-size: 0.92rem;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.option-btn:hover {
background: #1f2540;
border-color: #3b4375;
transform: translateY(-1px);
}
.option-btn.correct {
background: #123b26;
border-color: #2fd27f;
}
.option-btn.incorrect {
background: #3b1515;
border-color: #ff5c5c;
}
.option-btn.disabled {
cursor: default;
opacity: 0.8;
}
.feedback {
margin-top: 8px;
font-size: 0.9rem;
}
.feedback.correct {
color: #7fffb0;
}
.feedback.incorrect {
color: #ff9b9b;
}
.controls {
margin-top: 14px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.btn {
padding: 8px 14px;
border-radius: 999px;
border: none;
font-size: 0.9rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
background: #4f8cff;
color: #fff;
box-shadow: 0 8px 18px rgba(79, 140, 255, 0.35);
transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.btn.secondary {
background: transparent;
border: 1px solid #3b4375;
box-shadow: none;
color: #d0d3ff;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(79, 140, 255, 0.45);
}
.btn.secondary:hover {
background: #1b2140;
box-shadow: none;
}
.btn:disabled {
opacity: 0.6;
cursor: default;
transform: none;
box-shadow: none;
}
.score {
font-size: 0.9rem;
color: #c3c7f5;
}
.final-score {
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed #2b3155;
font-size: 0.95rem;
}
.final-score strong {
color: #ffffff;
}
.tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
background: #22284a;
color: #c3c7f5;
text-transform: uppercase;
letter-spacing: 0.08em;
}
</style>
</head>
<body>
<div class="app">
<h1>Australian Energy Sector Quiz</h1>
<div class="subtitle">
Test your knowledge of Australia’s energy mix, markets, and policy landscape.
</div>
<div class="level-select">
<label for="level">Difficulty:</label>
<select id="level">
<option value="moderate">Moderately general</option>
<option value="expert">Expert level</option>
</select>
<span class="tag" id="levelTag">Moderate</span>
</div>
<div id="quiz"></div>
<div class="controls">
<button class="btn secondary" id="restartBtn">Restart quiz</button>
<div class="score" id="scoreDisplay">Score: 0 / 10</div>
</div>
<div class="final-score" id="finalScore"></div>
</div>
<script>
// -----------------------------
// 10-QUESTION SETS
// -----------------------------
const moderateQuestions = [
{ question: "Which energy source currently supplies the largest share of Australia’s electricity generation?", options: ["Coal-fired power", "Large-scale solar PV", "Onshore wind"], answerIndex: 0 },
{ question: "Which Australian state has been particularly prominent in large-scale wind and solar development?", options: ["Tasmania", "South Australia", "New South Wales"], answerIndex: 1 },
{ question: "What is the main purpose of the National Electricity Market (NEM)?", options: ["To regulate fuel prices", "To coordinate wholesale electricity trading", "To manage rooftop solar"], answerIndex: 1 },
{ question: "Which factor is a major driver of Australia’s renewable transition?", options: ["Declining renewable costs", "A constitutional renewables mandate", "A national gas ban"], answerIndex: 0 },
{ question: "Which organisation operates the NEM?", options: ["AEMO", "CER", "ACCC"], answerIndex: 0 },
{ question: "Which renewable energy source has grown fastest in households?", options: ["Rooftop solar PV", "Small wind turbines", "Home biogas"], answerIndex: 0 },
{ question: "Which state leads in rooftop solar penetration?", options: ["Victoria", "Queensland", "WA"], answerIndex: 1 },
{ question: "What is the primary role of the Clean Energy Regulator?", options: ["Environmental approvals", "Administering emissions and renewable schemes", "Operating the grid"], answerIndex: 1 },
{ question: "Which fuel is most used for firming renewables today?", options: ["Hydrogen", "Natural gas", "Uranium"], answerIndex: 1 },
{ question: "Which sector is Australia’s largest emissions source?", options: ["Electricity generation", "Agriculture", "Transport"], answerIndex: 0 }
];
const expertQuestions = [
{ question: "Which mechanism balances supply and demand in real time in the NEM?", options: ["Capacity market", "Energy-only spot market with 5-minute pricing", "Fixed-price contracts"], answerIndex: 1 },
{ question: "What is the AER’s primary role?", options: ["Operating networks", "Economic regulation and market monitoring", "Environmental approvals"], answerIndex: 1 },
{ question: "What is the purpose of the ISP?", options: ["Binding investment mandates", "Least-cost system roadmap", "Setting retail tariffs"], answerIndex: 1 },
{ question: "What is a key challenge with high VRE penetration?", options: ["Connection bans", "Maintaining system strength and inertia", "Storage co-location bans"], answerIndex: 1 },
{ question: "What is the purpose of REZs?", options: ["Restrict renewables", "Coordinate transmission and generation", "Subsidise fossil fuels"], answerIndex: 1 },
{ question: "Who makes rules under the National Electricity Rules?", options: ["AEMO", "AER", "AEMC"], answerIndex: 2 },
{ question: "Which ISP mechanism identifies least-cost transmission development?", options: ["RIT-T", "Transmission Reliability Standard", "Optimal Development Path"], answerIndex: 2 },
{ question: "Which service provides sub-second frequency stabilisation?", options: ["Very Fast FCAS", "Inertia Support Service", "Contingency Raise FCAS"], answerIndex: 0 },
{ question: "Which state first legislated a REZ framework?", options: ["Queensland", "South Australia", "New South Wales"], answerIndex: 2 },
{ question: "Which test ensures transmission projects deliver net market benefits?", options: ["RIT-T", "ISP Alignment Test", "Transmission Access Reform Test"], answerIndex: 0 }
];
// -----------------------------
// State
// -----------------------------
let currentLevel = "moderate";
let questions = [...moderateQuestions];
let score = 0;
let answeredCount = 0;
const quizContainer = document.getElementById("quiz");
const scoreDisplay = document.getElementById("scoreDisplay");
const finalScore = document.getElementById("finalScore");
const levelSelect = document.getElementById("level");
const levelTag = document.getElementById("levelTag");
const restartBtn = document.getElementById("restartBtn");
// -----------------------------
// Rendering
// -----------------------------
function renderQuiz() {
quizContainer.innerHTML = "";
questions.forEach((q, index) => {
const card = document.createElement("div");
card.className = "question-card";
const header = document.createElement("div");
header.className = "question-header";
const number = document.createElement("div");
number.className = "question-number";
number.textContent = `Question ${index + 1} of ${questions.length}`;
header.appendChild(number);
card.appendChild(header);
const text = document.createElement("div");
text.className = "question-text";
text.textContent = q.question;
card.appendChild(text);
const optionsList = document.createElement("ul");
optionsList.className = "options";
q.options.forEach((opt, optIndex) => {
const li = document.createElement("li");
const btn = document.createElement("button");
btn.className = "option-btn";
btn.textContent = opt;
btn.addEventListener("click", () => handleAnswer(index, optIndex, card));
li.appendChild(btn);
optionsList.appendChild(li);
});
card.appendChild(optionsList);
const feedback = document.createElement("div");
feedback.className = "feedback";
feedback.id = `feedback-${index}`;
card.appendChild(feedback);
quizContainer.appendChild(card);
});
updateScoreDisplay();
finalScore.textContent = "";
}
function updateScoreDisplay() {
scoreDisplay.textContent = `Score: ${score} / ${questions.length}`;
}
// -----------------------------
// Logic
// -----------------------------
function handleAnswer(questionIndex, selectedIndex, cardElement) {
const question = questions[questionIndex];
const isCorrect = selectedIndex === question.answerIndex;
const buttons = cardElement.querySelectorAll(".option-btn");
const feedback = cardElement.querySelector(".feedback");
if (feedback.dataset.answered === "true") return;
buttons.forEach((btn, idx) => {
btn.classList.add("disabled");
if (idx === question.answerIndex) btn.classList.add("correct");
if (idx === selectedIndex && !isCorrect) btn.classList.add("incorrect");
});
if (isCorrect) {
score++;
feedback.textContent = "Correct.";
feedback.classList.add("correct");
} else {
feedback.textContent = "Not quite. The correct answer is highlighted.";
feedback.classList.add("incorrect");
}
feedback.dataset.answered = "true";
answeredCount++;
updateScoreDisplay();
if (answeredCount === questions.length) showFinalScore();
}
function showFinalScore() {
const percent = Math.round((score / questions.length) * 100);
let message;
if (percent === 100) message = "Outstanding — a perfect score.";
else if (percent >= 70) message = "Strong performance with room to sharpen further.";
else if (percent >= 40) message = "A decent attempt — keep exploring the sector.";
else message = "A tough quiz. Reviewing the fundamentals could help.";
finalScore.innerHTML = `<strong>Final score:</strong> ${score} / ${questions.length} (${percent}%). ${message}`;
}
function setLevel(level) {
currentLevel = level;
questions = level === "moderate" ? [...moderateQuestions] : [...expertQuestions];
levelTag.textContent = level === "moderate" ? "Moderate" : "Expert";
score = 0;
answeredCount = 0;
renderQuiz();
}
// -----------------------------
// Event listeners
// -----------------------------
levelSelect.addEventListener("change", (e) => setLevel(e.target.value));
restartBtn.addEventListener("click", () => {
score = 0;
answeredCount = 0;
renderQuiz();
});
renderQuiz();
</script>
</body>
</html>