|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>GitHub Copilot Hangman</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background: #f0f2f5; |
|
margin: 0; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
header { |
|
background-color: #0078d4; |
|
color: #fff; |
|
padding: 1rem; |
|
} |
|
h1 { |
|
margin: 0; |
|
font-size: 1.8rem; |
|
} |
|
.container { |
|
max-width: 900px; |
|
margin: 2rem auto; |
|
background: #fff; |
|
padding: 2rem; |
|
border-radius: 8px; |
|
box-shadow: 0 0 10px rgba(0,0,0,0.1); |
|
text-align: left; |
|
} |
|
#hangman-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
justify-content: center; |
|
align-items: flex-start; |
|
} |
|
|
|
#svg-container { |
|
width: 250px; |
|
margin-right: 2rem; |
|
margin-bottom: 2rem; |
|
} |
|
#quiz-content { |
|
flex: 1; |
|
margin: 0 1rem; |
|
min-width: 250px; |
|
} |
|
#question { |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
margin-bottom: 1rem; |
|
} |
|
.btn-row { |
|
margin-top: 1rem; |
|
} |
|
button { |
|
padding: 0.6rem 1.2rem; |
|
font-size: 1rem; |
|
margin: 0.5rem; |
|
cursor: pointer; |
|
border: none; |
|
border-radius: 4px; |
|
background-color: #0078d4; |
|
color: #fff; |
|
transition: background-color 0.3s ease; |
|
} |
|
button:hover { |
|
background-color: #005fa3; |
|
} |
|
#feedback { |
|
font-weight: bold; |
|
margin-top: 1rem; |
|
min-height: 24px; |
|
} |
|
#explanation { |
|
margin-top: 1rem; |
|
padding: 1rem; |
|
border: 1px solid #ccc; |
|
border-radius: 6px; |
|
display: none; |
|
background: #fafafa; |
|
} |
|
#next-btn, #restart-btn { |
|
margin-top: 1rem; |
|
} |
|
#restart-btn { |
|
background-color: #ff7675; |
|
} |
|
#restart-btn:hover { |
|
background-color: #d63031; |
|
} |
|
#hint-btn { |
|
background-color: #f1c40f; |
|
color: #000; |
|
} |
|
#hint-btn:hover { |
|
background-color: #d4ac0d; |
|
color: #fff; |
|
} |
|
|
|
#cheat-sheet { |
|
display: none; |
|
position: fixed; |
|
top: 10%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
background: #fff; |
|
padding: 20px; |
|
border: 2px solid #444; |
|
box-shadow: 0 0 10px rgba(0,0,0,0.5); |
|
z-index: 999; |
|
width: 80%; |
|
max-width: 600px; |
|
} |
|
#cheat-sheet h2 { |
|
margin-top: 0; |
|
} |
|
#cheat-sheet ul { |
|
list-style: disc; |
|
margin: 1rem 0 0 1.5rem; |
|
padding: 0; |
|
text-align: left; |
|
} |
|
#close-cheat { |
|
float: right; |
|
cursor: pointer; |
|
font-weight: bold; |
|
font-size: 18px; |
|
color: red; |
|
} |
|
|
|
@media (max-width: 600px) { |
|
#hangman-container { |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
#svg-container { |
|
margin-right: 0; |
|
margin-bottom: 1.5rem; |
|
} |
|
#quiz-content { |
|
margin: 0; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header> |
|
<h1>GitHub Copilot Hangman</h1> |
|
</header> |
|
<div class="container"> |
|
<div id="hangman-container"> |
|
|
|
<div id="svg-container"> |
|
<svg |
|
width="250" |
|
height="300" |
|
viewBox="0 0 250 300" |
|
style="border:1px solid #ccc;" |
|
> |
|
|
|
<line id="base-line" x1="10" y1="280" x2="240" y2="280" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="upright-post" x1="60" y1="280" x2="60" y2="40" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="top-beam" x1="60" y1="40" x2="160" y2="40" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="rope" x1="160" y1="40" x2="160" y2="80" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<circle id="head" cx="160" cy="100" r="20" stroke="#444" stroke-width="4" fill="none" style="display:none;" /> |
|
|
|
<line id="body" x1="160" y1="120" x2="160" y2="180" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="left-arm" x1="160" y1="140" x2="120" y2="120" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="right-arm" x1="160" y1="140" x2="200" y2="120" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="left-leg" x1="160" y1="180" x2="130" y2="220" stroke="#444" stroke-width="4" style="display:none;" /> |
|
|
|
<line id="right-leg" x1="160" y1="180" x2="190" y2="220" stroke="#444" stroke-width="4" style="display:none;" /> |
|
</svg> |
|
</div> |
|
|
|
<div id="quiz-content"> |
|
<div id="question">Loading question...</div> |
|
<div class="btn-row"> |
|
<button id="yes-btn">YES</button> |
|
<button id="no-btn">NO</button> |
|
</div> |
|
<div id="feedback"></div> |
|
<div id="explanation"></div> |
|
<button id="hint-btn">Hint</button> |
|
<button id="next-btn" style="display:none;">Next</button> |
|
<button id="restart-btn" style="display:none;">Restart</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="cheat-sheet"> |
|
<span id="close-cheat">X</span> |
|
<h2>Key RDD Concepts</h2> |
|
<ul> |
|
<li><b>Fault Tolerance:</b> RDDs automatically recover from node failures.</li> |
|
<li><b>Lazy Evaluation:</b> Transformations are computed only when an action is invoked.</li> |
|
<li><b>Caching:</b> Use persist() or cache() to keep RDDs in memory.</li> |
|
<li><b>Transformations & Actions:</b> Transformations create new RDDs; actions return results to the driver.</li> |
|
<li><b>Partitioning:</b> Data is divided across nodes for parallel processing.</li> |
|
<li><b>Shared Variables:</b> Broadcast variables and accumulators help manage data and counters.</li> |
|
<li><b>Shuffling:</b> Redistribution of data during aggregations or joins.</li> |
|
<li><b>SparkContext:</b> Entry point for Spark functionality.</li> |
|
<li><b>Data Sources:</b> RDDs can be created from files, collections, and various storage systems.</li> |
|
<li><b>Efficient Aggregation:</b> Operations like reduceByKey optimize data processing.</li> |
|
</ul> |
|
</div> |
|
<script> |
|
|
|
|
|
|
|
const quizData = [ |
|
{ |
|
question: "Does GitHub Copilot dramatically accelerate developer productivity?", |
|
correctAnswer: "yes", |
|
explanation: "Yes. Research from GitHub and Microsoft shows a 55% increase in overall productivity when using GitHub Copilot." |
|
}, |
|
{ |
|
question: "Is GitHub Copilot limited to only one programming language?", |
|
correctAnswer: "no", |
|
explanation: "No. GitHub Copilot supports all popular programming languages, helping developers regardless of language choice." |
|
}, |
|
{ |
|
question: "Was GitHub Copilot developed solely by GitHub?", |
|
correctAnswer: "no", |
|
explanation: "No. GitHub Copilot was developed through a collaboration between GitHub and OpenAI, and it’s powered by OpenAI Codex." |
|
}, |
|
{ |
|
question: "Is GitHub Copilot powered by OpenAI Codex?", |
|
correctAnswer: "yes", |
|
explanation: "Yes. GitHub Copilot leverages OpenAI Codex, an AI system more capable than GPT-3 in generating code completions." |
|
}, |
|
{ |
|
question: "Does GitHub Copilot integrate with multiple IDEs such as Visual Studio Code, Visual Studio, Vim/Neovim, and JetBrains?", |
|
correctAnswer: "yes", |
|
explanation: "Yes. GitHub Copilot is available as an extension for these popular integrated development environments." |
|
}, |
|
{ |
|
question: "Does GitHub Copilot Free offer unlimited code completions and chat messages?", |
|
correctAnswer: "no", |
|
explanation: "No. The free tier is limited to 2000 code completions and 50 chat messages per month." |
|
}, |
|
{ |
|
question: "Is GitHub Copilot Pro free for verified students, teachers, and maintainers of popular open source projects?", |
|
correctAnswer: "yes", |
|
explanation: "Yes. Verified students, teachers, and open source maintainers can access GitHub Copilot Pro for free." |
|
}, |
|
{ |
|
question: "Do organizations benefit from features like policy management and audit logs with GitHub Copilot Business?", |
|
correctAnswer: "yes", |
|
explanation: "Yes. GitHub Copilot Business adds organization-wide controls such as policy management and audit logs." |
|
}, |
|
{ |
|
question: "Does GitHub Copilot Enterprise provide additional features like fine tuning a custom large language model?", |
|
correctAnswer: "yes", |
|
explanation: "Yes. In addition to Business features, GitHub Copilot Enterprise includes capabilities such as fine tuning a custom large language model." |
|
}, |
|
{ |
|
question: "Is GitHub Copilot Chat completely free from biases and inaccuracies?", |
|
correctAnswer: "no", |
|
explanation: "No. While powerful, Copilot Chat can exhibit biases from its training data and may sometimes generate inaccurate code." |
|
} |
|
]; |
|
|
|
|
|
|
|
|
|
const hangmanParts = [ |
|
"base-line", |
|
"upright-post", |
|
"top-beam", |
|
"rope", |
|
"head", |
|
"body", |
|
"left-arm", |
|
"right-arm", |
|
"left-leg", |
|
"right-leg" |
|
]; |
|
const maxMistakes = hangmanParts.length; |
|
|
|
|
|
|
|
|
|
let currentQuestionIndex = 0; |
|
let mistakes = 0; |
|
let gameOver = false; |
|
|
|
const questionDiv = document.getElementById("question"); |
|
const yesBtn = document.getElementById("yes-btn"); |
|
const noBtn = document.getElementById("no-btn"); |
|
const nextBtn = document.getElementById("next-btn"); |
|
const restartBtn = document.getElementById("restart-btn"); |
|
const feedbackDiv = document.getElementById("feedback"); |
|
const explanationDiv = document.getElementById("explanation"); |
|
const hintBtn = document.getElementById("hint-btn"); |
|
const cheatSheet = document.getElementById("cheat-sheet"); |
|
const closeCheat = document.getElementById("close-cheat"); |
|
|
|
const svgParts = hangmanParts.map(id => document.getElementById(id)); |
|
|
|
|
|
|
|
|
|
function initGame() { |
|
mistakes = 0; |
|
currentQuestionIndex = 0; |
|
gameOver = false; |
|
feedbackDiv.textContent = ""; |
|
explanationDiv.style.display = "none"; |
|
restartBtn.style.display = "none"; |
|
nextBtn.style.display = "none"; |
|
|
|
svgParts.forEach(part => { |
|
if (part) part.style.display = "none"; |
|
}); |
|
loadQuestion(); |
|
} |
|
|
|
|
|
|
|
|
|
function loadQuestion() { |
|
if (currentQuestionIndex >= quizData.length) { |
|
|
|
endGame(true); |
|
return; |
|
} |
|
feedbackDiv.textContent = ""; |
|
explanationDiv.style.display = "none"; |
|
nextBtn.style.display = "none"; |
|
const currentQ = quizData[currentQuestionIndex]; |
|
questionDiv.textContent = currentQ.question; |
|
} |
|
|
|
|
|
|
|
|
|
function handleAnswer(userAnswer) { |
|
if (gameOver || currentQuestionIndex >= quizData.length) return; |
|
const currentQ = quizData[currentQuestionIndex]; |
|
explanationDiv.textContent = currentQ.explanation; |
|
explanationDiv.style.display = "block"; |
|
if (userAnswer === currentQ.correctAnswer) { |
|
feedbackDiv.textContent = "Correct!"; |
|
} else { |
|
feedbackDiv.textContent = "Incorrect!"; |
|
mistakes++; |
|
updateHangman(); |
|
if (mistakes >= maxMistakes) { |
|
|
|
endGame(false); |
|
return; |
|
} |
|
} |
|
|
|
if (currentQuestionIndex < quizData.length) { |
|
nextBtn.style.display = "inline-block"; |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
function updateHangman() { |
|
|
|
const partToShow = hangmanParts[mistakes - 1]; |
|
if (partToShow) { |
|
document.getElementById(partToShow).style.display = "block"; |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
function endGame(userCompletedAll) { |
|
gameOver = true; |
|
yesBtn.disabled = true; |
|
noBtn.disabled = true; |
|
nextBtn.style.display = "none"; |
|
restartBtn.style.display = "inline-block"; |
|
if (userCompletedAll && mistakes < maxMistakes) { |
|
feedbackDiv.textContent = `Congratulations! You answered all ${quizData.length} questions with ${mistakes} mistake(s).`; |
|
explanationDiv.textContent = "Game Complete!"; |
|
explanationDiv.style.display = "block"; |
|
} else { |
|
questionDiv.textContent = "Game Over!"; |
|
feedbackDiv.textContent = `You made ${mistakes} mistake(s).`; |
|
explanationDiv.textContent = "The game has ended."; |
|
explanationDiv.style.display = "block"; |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
function loadNextQuestion() { |
|
currentQuestionIndex++; |
|
loadQuestion(); |
|
} |
|
|
|
|
|
|
|
|
|
function restartGame() { |
|
yesBtn.disabled = false; |
|
noBtn.disabled = false; |
|
initGame(); |
|
} |
|
|
|
|
|
|
|
|
|
function showCheatSheet() { |
|
cheatSheet.style.display = "block"; |
|
} |
|
function hideCheatSheet() { |
|
cheatSheet.style.display = "none"; |
|
} |
|
|
|
|
|
|
|
|
|
yesBtn.addEventListener("click", () => handleAnswer("yes")); |
|
noBtn.addEventListener("click", () => handleAnswer("no")); |
|
nextBtn.addEventListener("click", loadNextQuestion); |
|
restartBtn.addEventListener("click", restartGame); |
|
hintBtn.addEventListener("click", showCheatSheet); |
|
closeCheat.addEventListener("click", hideCheatSheet); |
|
|
|
|
|
initGame(); |
|
</script> |
|
</body> |
|
</html> |
|
|
