Memoria Teen - Delmir Bartolomeu Sobrinho
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Memória Teen - CLDF Quiz</title>
<style>
:root {
--cldf-blue: #004A8F;
--cldf-blue-light: #007BFF;
--cldf-green: #28A745;
--cldf-red: #DC3545;
--cldf-yellow: #FFC107;
--cldf-purple: #6F42C1;
--cldf-white: #FFFFFF;
--cldf-gray: #6C757D;
--cldf-dark: #212529;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: var(--cldf-dark);
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
.header {
background: var(--cldf-white);
padding: 30px;
border-radius: 20px;
text-align: center;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.header h1 {
color: var(--cldf-blue);
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 700;
}
.header p {
color: var(--cldf-gray);
font-size: 1.2rem;
}
.game-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: var(--cldf-white);
padding: 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-left: 5px solid var(--cldf-blue);
}
.stat-card h3 {
color: var(--cldf-blue);
font-size: 2rem;
margin-bottom: 5px;
}
.stat-card p {
color: var(--cldf-gray);
font-weight: 500;
}
.quiz-container {
background: var(--cldf-white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
margin-bottom: 30px;
}
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
.question-number {
background: var(--cldf-blue);
color: var(--cldf-white);
padding: 10px 20px;
border-radius: 25px;
font-weight: bold;
font-size: 1.1rem;
}
.progress-bar {
flex: 1;
margin: 0 20px;
height: 10px;
background: #f0f0f0;
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--cldf-blue), var(--cldf-blue-light));
transition: width 0.3s ease;
}
.question-text {
font-size: 1.4rem;
color: var(--cldf-dark);
margin-bottom: 30px;
line-height: 1.6;
font-weight: 500;
}
.options-grid {
display: grid;
gap: 15px;
margin-bottom: 30px;
}
.option {
background: #f8f9fa;
border: 2px solid #e9ecef;
padding: 20px;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1rem;
position: relative;
}
.option:hover {
border-color: var(--cldf-blue);
background: #e3f2fd;
transform: translateY(-2px);
}
.option.selected {
border-color: var(--cldf-blue);
background: var(--cldf-blue);
color: var(--cldf-white);
}
.option.correct {
border-color: var(--cldf-green);
background: var(--cldf-green);
color: var(--cldf-white);
}
.option.incorrect {
border-color: var(--cldf-red);
background: var(--cldf-red);
color: var(--cldf-white);
}
.option-letter {
display: inline-block;
width: 30px;
height: 30px;
background: var(--cldf-blue);
color: var(--cldf-white);
border-radius: 50%;
text-align: center;
line-height: 30px;
margin-right: 15px;
font-weight: bold;
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
}
.btn {
background: var(--cldf-blue);
color: var(--cldf-white);
border: none;
padding: 15px 30px;
border-radius: 25px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn:hover {
background: var(--cldf-blue-light);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.btn:disabled {
background: var(--cldf-gray);
cursor: not-allowed;
transform: none;
}
.btn-secondary {
background: var(--cldf-gray);
}
.btn-secondary:hover {
background: #5a6268;
}
.results-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.results-content {
background: var(--cldf-white);
padding: 40px;
border-radius: 20px;
text-align: center;
max-width: 500px;
margin: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.results-content h2 {
color: var(--cldf-blue);
font-size: 2.5rem;
margin-bottom: 20px;
}
.score-display {
font-size: 3rem;
font-weight: bold;
margin: 20px 0;
}
.score-excellent { color: var(--cldf-green); }
.score-good { color: var(--cldf-blue); }
.score-fair { color: var(--cldf-yellow); }
.score-poor { color: var(--cldf-red); }
@media (max-width: 768px) {
.container {
padding: 15px;
}
.quiz-container {
padding: 25px;
}
.question-header {
flex-direction: column;
gap: 15px;
}
.progress-bar {
margin: 0;
width: 100%;
}
.controls {
flex-direction: column;
gap: 15px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🧠 Memória Teen</h1>
<p>Quiz Interativo sobre o Legislativo do Distrito Federal</p>
</div>
<div class="game-stats">
<div class="stat-card">
<h3 id="currentQuestion">1</h3>
<p>Questão Atual</p>
</div>
<div class="stat-card">
<h3 id="correctAnswers">0</h3>
<p>Acertos</p>
</div>
<div class="stat-card">
<h3 id="totalQuestions">10</h3>
<p>Total de Questões</p>
</div>
</div>
<div class="quiz-container">
<div class="question-header">
<div class="question-number">
Questão <span id="questionNum">1</span>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="question-number">
<span id="timeLeft">30</span>s
</div>
</div>
<div class="question-text" id="questionText">
Carregando pergunta...
</div>
<div class="options-grid" id="optionsGrid">
<!-- Opções serão geradas pelo JavaScript -->
</div>
<div class="controls">
<button class="btn btn-secondary" onclick="goHome()">🏠 Voltar ao Menu</button>
<button class="btn" id="nextBtn" onclick="nextQuestion()" disabled>Próxima Questão</button>
</div>
</div>
</div>
<!-- Modal de Resultados -->
<div class="results-modal" id="resultsModal">
<div class="results-content">
<h2>🎯 Resultado Final</h2>
<div class="score-display" id="finalScore">0/10</div>
<p id="scoreMessage">Mensagem de resultado</p>
<div style="margin: 30px 0;">
<button class="btn" onclick="restartQuiz()">🔄 Jogar Novamente</button>
<button class="btn btn-secondary" onclick="goHome()">🏠 Menu Principal</button>
</div>
</div>
</div>
<script>
// Banco de questões sobre o Legislativo do DF
const questions = [
{
question: "Qual é a função principal da Câmara Legislativa do Distrito Federal?",
options: [
"Executar as leis do DF",
"Criar e aprovar leis para o DF",
"Julgar crimes no DF",
"Administrar hospitais do DF"
],
correct: 1
},
{
question: "Quantos deputados distritais compõem a CLDF?",
options: ["20 deputados", "24 deputados", "30 deputados", "32 deputados"],
correct: 1
},
{
question: "Qual é o mandato de um deputado distrital?",
options: ["2 anos", "3 anos", "4 anos", "6 anos"],
correct: 2
},
{
question: "Em que ano foi criada a Câmara Legislativa do DF?",
options: ["1960", "1988", "1990", "1991"],
correct: 3
},
{
question: "Onde fica localizada a sede da CLDF?",
options: [
"Asa Norte, Brasília",
"Asa Sul, Brasília",
"Setor de Embaixadas",
"Esplanada dos Ministérios"
],
correct: 0
},
{
question: "O que significa a sigla CLDF?",
options: [
"Conselho Legislativo do DF",
"Câmara Legal do DF",
"Câmara Legislativa do Distrito Federal",
"Comissão Legislativa do DF"
],
correct: 2
},
{
question: "Qual é a idade mínima para ser deputado distrital?",
options: ["18 anos", "21 anos", "25 anos", "30 anos"],
correct: 1
},
{
question: "As sessões da CLDF são:",
options: [
"Sempre fechadas ao público",
"Abertas ao público em geral",
"Apenas para convidados",
"Somente virtuais"
],
correct: 1
},
{
question: "Quem pode propor projetos de lei na CLDF?",
options: [
"Apenas o Governador",
"Apenas os deputados",
"Deputados, Governador e cidadãos",
"Apenas os cidadãos"
],
correct: 2
},
{
question: "O que é uma CPI na CLDF?",
options: [
"Comissão Parlamentar de Inquérito",
"Comissão Pública de Investigação",
"Conselho Parlamentar Interno",
"Comissão de Projetos Importantes"
],
correct: 0
}
];
let gameState = {
currentQuestion: 0,
correctAnswers: 0,
selectedOption: null,
timeLeft: 30,
timer: null,
questions: []
};
function initQuiz() {
gameState.questions = shuffleArray([...questions]);
gameState.currentQuestion = 0;
gameState.correctAnswers = 0;
gameState.selectedOption = null;
updateStats();
loadQuestion();
startTimer();
}
function shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
function loadQuestion() {
const question = gameState.questions[gameState.currentQuestion];
document.getElementById('questionText').textContent = question.question;
document.getElementById('questionNum').textContent = gameState.currentQuestion + 1;
const optionsGrid = document.getElementById('optionsGrid');
optionsGrid.innerHTML = '';
question.options.forEach((option, index) => {
const optionElement = document.createElement('div');
optionElement.className = 'option';
optionElement.innerHTML = `
<span class="option-letter">${String.fromCharCode(65 + index)}</span>
${option}
`;
optionElement.addEventListener('click', () => selectOption(index));
optionsGrid.appendChild(optionElement);
});
updateProgress();
resetTimer();
document.getElementById('nextBtn').disabled = true;
}
function selectOption(index) {
if (gameState.selectedOption !== null) return;
gameState.selectedOption = index;
const question = gameState.questions[gameState.currentQuestion];
const options = document.querySelectorAll('.option');
// Mostrar resultado
options.forEach((option, i) => {
if (i === question.correct) {
option.classList.add('correct');
} else if (i === index && i !== question.correct) {
option.classList.add('incorrect');
} else if (i === index) {
option.classList.add('selected');
}
});
// Verificar se acertou
if (index === question.correct) {
gameState.correctAnswers++;
updateStats();
}
clearInterval(gameState.timer);
document.getElementById('nextBtn').disabled = false;
}
function nextQuestion() {
gameState.currentQuestion++;
gameState.selectedOption = null;
if (gameState.currentQuestion >= gameState.questions.length) {
showResults();
} else {
loadQuestion();
startTimer();
}
}
function startTimer() {
gameState.timeLeft = 30;
updateTimer();
gameState.timer = setInterval(() => {
gameState.timeLeft--;
updateTimer();
if (gameState.timeLeft <= 0) {
clearInterval(gameState.timer);
// Auto-selecionar resposta incorreta se tempo acabar
if (gameState.selectedOption === null) {
selectOption(-1); // Resposta incorreta
}
}
}, 1000);
}
function resetTimer() {
clearInterval(gameState.timer);
gameState.timeLeft = 30;
updateTimer();
}
function updateTimer() {
document.getElementById('timeLeft').textContent = gameState.timeLeft;
}
function updateStats() {
document.getElementById('currentQuestion').textContent = gameState.currentQuestion + 1;
document.getElementById('correctAnswers').textContent = gameState.correctAnswers;
document.getElementById('totalQuestions').textContent = gameState.questions.length;
}
function updateProgress() {
const progress = ((gameState.currentQuestion + 1) / gameState.questions.length) * 100;
document.getElementById('progressFill').style.width = progress + '%';
}
function showResults() {
clearInterval(gameState.timer);
const score = gameState.correctAnswers;
const total = gameState.questions.length;
const percentage = (score / total) * 100;
document.getElementById('finalScore').textContent = `${score}/${total}`;
let message = '';
let scoreClass = '';
if (percentage >= 90) {
message = '🏆 Excelente! Você domina o assunto!';
scoreClass = 'score-excellent';
} else if (percentage >= 70) {
message = '👏 Muito bom! Continue estudando!';
scoreClass = 'score-good';
} else if (percentage >= 50) {
message = '📚 Razoável. Que tal revisar o conteúdo?';
scoreClass = 'score-fair';
} else {
message = '💪 Não desista! Estude mais e tente novamente!';
scoreClass = 'score-poor';
}
document.getElementById('finalScore').className = `score-display ${scoreClass}`;
document.getElementById('scoreMessage').textContent = message;
document.getElementById('resultsModal').style.display = 'flex';
}
function restartQuiz() {
document.getElementById('resultsModal').style.display = 'none';
initQuiz();
}
function goHome() {
window.location.href = '../index.html';
}
// Inicializar quiz quando a página carregar
document.addEventListener('DOMContentLoaded', initQuiz);
</script>
</body>
</html>
<p><img alt="" height="136" src="/documents/5744400/27205860/00+-+Mem%C3%B3ria+e+Hist%C3%B3ria+-+fig+-+servidores.svg/e639f166-ef48-580f-895a-c8c4696b61f9?t=1695823925274" style="margin:0px 15px; float:left" width="168" /></p>
<p><strong>Os servidores da Câmara Legislativa do Distrito Federal são protagonistas na construção da história e no funcionamento diário do Parlamento distrital. </strong> Suas trajetórias, experiências e conquistas refletem o compromisso com o serviço público e com o desenvolvimento do Distrito Federal ao longo dos anos.</p>
<p>Nesta seção, estão reunidos conteúdos que valorizam essa participação fundamental, como depoimentos do projeto <em>Memória Viva</em>, que resgatam histórias marcantes e experiências de quem fez e faz parte da Casa, além de informações sobre os concursos públicos já realizados pelo órgão, registrando a evolução das funções e cargos ao longo da história da instituição. </p>
<p align="center"> </p>
<div class="portlet-boundary portlet-boundary_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_ portlet-static portlet-static-end portlet-borderless portlet-navigation " id="p_p_id_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_FyunxIijt39A_"><span id="p_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_FyunxIijt39A"></span>
<div class="portlet-content-container">
<div class="portlet-body">
<div class="navegacao-cards mb-5" id="navbar_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2">
<ul aria-label="Páginas do site" class="p-0 row justify-content-center" role="menubar">
<li class="lfr-nav-item nav-item col-lg-4" id="layout_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2_1540" role="presentation">
<h4 class="text-truncate text-center"><a aria-labelledby="layout_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2_1540" class="nav-link text-truncate btn card bg-grey m-3 py-5" href="https://www.cl.df.gov.br/web/guest/memoria-e-historia-memoria-viva" role="menuitem">Memória Viva</a></h4>
</li>
<li class="lfr-nav-item nav-item col-lg-4" id="layout_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2_1541" role="presentation">
<h4 class="text-truncate text-center"><a aria-labelledby="layout_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet_INSTANCE_d5bE2iqL5IZ2_1541" class="nav-link text-truncate btn card bg-grey m-3 py-5" href="https://www.cl.df.gov.br/web/guest/memoria-e-historia-concursos-publicos" role="menuitem">Concursos Públicos da CLDF </a></h4>
</li>
</ul>
</div>
<style type="text/css">.navegacao-cards a.card:hover{ opacity: 1; } .navegacao-cards a.card:hover h4{ color: #00722d; } .navegacao-cards a.card:active, .navegacao-cards a.card:focus { background: #E7E7E7; opacity: 1; }
</style>
</div>
</div>
</div>