ronaldo/quiz-ius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inicio do dia 06-04-26

Browse Source
This commit is contained in:
Ronaldo
2026-04-06 10:05:22 +00:00
parent 0687e194ad
commit 7b9fb34462
6 changed files with 211 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
css/custom.css
View File

@@ -86,7 +86,7 @@ body, .pane, .view {
} }
.logo-top-small { .logo-top-small {
max-width: 74%; max-width: 74%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 50%; left: 50%;
@@ -110,17 +110,18 @@ max-width: 74%;
/* Question Screen */ /* Question Screen */
.question-box { .question-box {
background-color: var(--cor-fundo-escuro); background-color: #FFFFFF; /* Folhinha branca */
border-radius: 4rem 1rem; border-radius: 4rem 1rem;
padding: 1.5rem; padding: 1.5rem;
line-height: 2.3rem; line-height: 2.3rem;
width: 90%; width: 90%;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.5); box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
z-index: 5;
} }
.question-box p { .question-box p {
color: var(--cor-texto-principal); color: var(--cor-texto-secundario); /* Fonte verde */
font-family: 'General Sans' !important; font-family: 'General Sans' !important;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 600; font-weight: 600;
@@ -157,8 +158,8 @@ max-width: 74%;
justify-content: center; justify-content: center;
font-size: 3em; font-size: 3em;
font-weight: bold; font-weight: bold;
color: #000; color: var(--cor-texto-secundario); /* Fonte verde */
border-right: 0.1rem solid rgba(0,0,0,0.1); border-right: 0.1rem solid rgba(0,0,0,0.05);
} }
.text-box { .text-box {
@@ -167,8 +168,8 @@ width: 80%;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.8rem; font-size: 1.8rem;
color: #000; color: var(--cor-texto-secundario); /* Fonte verde */
font-weight: 500; font-weight: 600;
line-height: 0.9em; line-height: 0.9em;
} }
@@ -193,14 +194,14 @@ width: 80%;
} }
.result-title-box h1 { .result-title-box h1 {
color: var(--cor-fundo-escuro); color: var(--cor-texto-secundario); /* Fonte verde */
font-size: 4rem; font-size: 4rem;
font-weight: bold; font-weight: bold;
margin: 0; margin: 0;
} }
.score-box { .score-box {
background-color: var(--cor-fundo-escuro); background-color: #FFFFFF; /* Quadrado branco */
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 2rem; padding: 2rem;
width: 80%; width: 80%;
@@ -210,13 +211,13 @@ width: 80%;
} }
.score-box p { .score-box p {
color: #fff; color: var(--cor-texto-secundario); /* Fonte verde */
font-size: 2rem; font-size: 2rem;
margin: 0; margin: 0;
} }
.score-box h2 { .score-box h2 {
color: var(--cor-titulos); color: var(--cor-fundo-resultado); /* Fonte verde escura */
font-size: 8rem; font-size: 8rem;
font-weight: bold; font-weight: bold;
margin: -0.5rem 0; margin: -0.5rem 0;
@@ -252,19 +253,29 @@ body {
background-color: var(--cor-fundo-principal) !important; background-color: var(--cor-fundo-principal) !important;
} }
/* --- Modo Debug (rotaciona -90deg e redimensiona para view) --- */ /* --- Modo Debug (Simulação Real 1080x1920 em Monitor Horizontal) --- */
html.debug-mode { html.debug-mode {
width: calc(100vh * 9 / 16); /* Força o container em 9:16 baseado na altura total do monitor */
height: 100vh; height: 100vh !important;
width: 56.25vh !important; /* (1080 / 1920 * 100) = 56.25vh */
position: fixed !important; position: fixed !important;
top: 50vh !important; top: 50% !important;
left: 0; left: 50% !important;
/* Centraliza e rotaciona -90deg para teste em monitor widescreen */
transform: translate(-50%, -50%) rotate(-90deg) !important; transform: translate(-50%, -50%) rotate(-90deg) !important;
transform-origin: center center !important; transform-origin: center center !important;
/* Auxílio visual para delimitar a área da TV */
border: 1px solid rgba(255,255,255,0.2) !important;
box-shadow: 0 0 5rem rgba(0,0,0,0.8) !important;
background-color: #000 !important;
overflow: hidden !important; overflow: hidden !important;
} }
html.debug-mode body { html.debug-mode body {
/* No Modo Debug, 1vh refere-se à altura desse container simulado */
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
max-width: none !important; max-width: none !important;

29
dados/config.json
View File

@@ -5,11 +5,16 @@
"texto_botao_iniciar": "INICIAR", "texto_botao_iniciar": "INICIAR",
"texto_resultado_parabens": "Parabéns!", "texto_resultado_parabens": "Parabéns!",
"texto_resultado_acertos": "Você acertou {{pontuacao}} perguntas", "texto_resultado_acertos": "Você acertou {{pontuacao}} perguntas",
"texto_resultado_derrota": "Você acertou apenas {{pontuacao}} perguntas. Tente novamente!" "texto_resultado_derrota": "Você acertou apenas {{pontuacao}} perguntas. Tente novamente!",
"transitionDuration": 2000,
"transitionBackgroundColor": "#FFFFFF",
"feedbackDelay": 4500,
"initDelay": 1000
}, },
"imagens": { "imagens": {
"transitionLogo": "img/ius_logo_branco.jpg",
"fundo_padrao": "img/quiz_patternBG.png", "fundo_padrao": "img/quiz_patternBG.png",
"logo_tela_inicial": "img/quiz_LOGO_TITLE.png", "logo_tela_inicial": "img/quiz_LOGO_GAME.png",
"logo_tela_jogo": "img/quiz_LOGO_GAME.png", "logo_tela_jogo": "img/quiz_LOGO_GAME.png",
"logo_tela_resultado": "img/quiz_LOGO_END.png", "logo_tela_resultado": "img/quiz_LOGO_END.png",
"logo_patrocinador": "img/quiz_LOGO_TITLE.png", "logo_patrocinador": "img/quiz_LOGO_TITLE.png",
@@ -17,20 +22,20 @@
}, },
"cores": { "cores": {
"fundoPrincipal": "#83B81A", "fundoPrincipal": "#83B81A",
"fundoEscuro": "#1e294a", "fundoEscuro": "#83B81A",
"corFundoResultado": "#537813", "corFundoResultado": "#537813",
"textoPrincipal": "#FFFFFF", "textoPrincipal": "#FFFFFF",
"textoSecundario": "#263D6B", "textoSecundario": "#537813",
"tituloCor": "#A1C633", "tituloCor": "#FFFFFF",
"btnIniciarFundo": "#A1C633", "btnIniciarFundo": "#FFFFFF",
"btnIniciarTexto": "#FFFFFF", "btnIniciarTexto": "#537813",
"corAcerto": "#20386f", "corAcerto": "#537813",
"corErro": "#702e21", "corErro": "#702e21",
"alternativas": { "alternativas": {
"A": "#cfd6e2", "A": "#FFFFFF",
"B": "#cfd6e2", "B": "#FFFFFF",
"C": "#cfd6e2", "C": "#FFFFFF",
"D": "#cfd6e2" "D": "#FFFFFF"
} }
} }
} }

BIN
img/ius_logo_branco.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

195
index.html
View File

@@ -1,109 +1,126 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="play" ng-app="app"> <html class="play" ng-app="app">
<head>
<script>
S = {}
</script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<head>
<script src="lib/ionic/js/ionic.bundle.js"></script> <script>
<script src="js/lottie-player.js"></script> S = {}
</script>
<!-- Fontes Google Fonts & Fontshare --> <meta charset="utf-8">
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap" rel="stylesheet"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <title></title>
<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/lottie-player.js"></script>
<!-- Fontes Google Fonts & Fontshare -->
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet"> <link href="css/ionic.app.css" rel="stylesheet">
--> -->
<!-- jsDelivr --> <!-- jsDelivr -->
<!-- <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script> --> <script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script> -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ionic/css/style.css" rel="stylesheet"> <link href="lib/ionic/css/style.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/css/transition-style.css"> <link rel="stylesheet" href="lib/ionic/css/transition-style.css">
<style type="text/css"> <style type="text/css">
.platform-ios .manual-ios-statusbar-padding{ .platform-ios .manual-ios-statusbar-padding {
padding-top:20px; padding-top: 20px;
} }
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script> .manual-remove-top-padding {
<script src="js/controllers.js"></script> padding-top: 0px;
<script src="js/routes.js"></script> }
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs .manual-remove-top-padding .scroll {
padding-top: 0px !important;
}
ion-list.manual-list-fullwidth div.list,
.list.card.manual-card-fullwidth {
margin-left: -10px;
margin-right: -10px;
}
ion-list.manual-list-fullwidth div.list>.item,
.list.card.manual-card-fullwidth>.item {
border-radius: 0px;
border-left: 0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul {
list-style-type: disc;
padding-left: 40px;
}
.show-list-numbers-and-dots ol {
list-style-type: decimal;
padding-left: 40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script> <script src="lib/ionicuirouter/ionicUIRouter.js"></script>
--> -->
</head> </head>
<style> <style>
/* Estilos para o overlay de transição */ /* Estilos para o overlay de transição */
#transition { #transition {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #000; background-color: var(--cor-transition-bg);
z-index: 9999; z-index: 9999;
pointer-events: none; pointer-events: none;
opacity: 0; clip-path: circle(125%);
transition: opacity 0.5s ease-in-out; display: flex;
} align-items: center;
justify-content: center;
}
#transition.active { #transition img {
opacity: 1; max-width: 50%;
} height: auto;
</style> }
<body animation="slide-left-right-ios7"> </style>
<div class="custom-bg-pattern" ></div>
<div> <body animation="slide-left-right-ios7">
<div> <div id="transition" transition-style="">
<ion-nav-bar class="bar-stable"> <img src="img/ius_logo_branco.jpg">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div> </div>
</div>
</body> <div>
</html> <div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>

103
js/controllers.js
View File

@@ -42,6 +42,9 @@ angular.module('app.controllers', [])
// Carregar os dados de parametrização global e aplicar ao tema // Carregar os dados de parametrização global e aplicar ao tema
$http.get('dados/config.json').then(function (response) { $http.get('dados/config.json').then(function (response) {
S.themeConfig = response.data; S.themeConfig = response.data;
S.transitionDuration = S.themeConfig.tema.transitionDuration || 3500;
S.feedbackDelay = S.themeConfig.tema.feedbackDelay || 3000;
S.initDelay = S.themeConfig.tema.initDelay || 500;
console.log(S.themeConfig) console.log(S.themeConfig)
if (S.themeConfig.debug) { if (S.themeConfig.debug) {
@@ -95,6 +98,7 @@ angular.module('app.controllers', [])
rootNode.style.setProperty('--cor-acerto', S.themeConfig.cores.corAcerto); rootNode.style.setProperty('--cor-acerto', S.themeConfig.cores.corAcerto);
rootNode.style.setProperty('--cor-erro', S.themeConfig.cores.corErro); rootNode.style.setProperty('--cor-erro', S.themeConfig.cores.corErro);
rootNode.style.setProperty('--cor-fundo-resultado', S.themeConfig.cores.corFundoResultado); rootNode.style.setProperty('--cor-fundo-resultado', S.themeConfig.cores.corFundoResultado);
rootNode.style.setProperty('--cor-transition-bg', S.themeConfig.tema.transitionBackgroundColor || '#000000');
Object.keys(S.themeConfig.cores.alternativas).forEach(key => { Object.keys(S.themeConfig.cores.alternativas).forEach(key => {
rootNode.style.setProperty(`--cor-alt-${key.toLowerCase()}`, S.themeConfig.cores.alternativas[key]); rootNode.style.setProperty(`--cor-alt-${key.toLowerCase()}`, S.themeConfig.cores.alternativas[key]);
@@ -139,7 +143,11 @@ S.derrotas = 0;
$http.get('dados/perguntas.json').then(function (response) { $http.get('dados/perguntas.json').then(function (response) {
// Atribuir os dados ao escopo // Atribuir os dados ao escopo
$scope.quizDataOriginal = response.data; $scope.quizDataOriginal = response.data;
// Revelar a tela inicial após o carregamento completo
$timeout(() => {
S.setupTransitionOut();
}, S.initDelay);
}); });
@@ -171,10 +179,14 @@ S.derrotas = 0;
}); });
S.correctList = S.generateNonRepeatingRandomNumbers(5, 5) S.correctList = S.generateNonRepeatingRandomNumbers(5, 5)
S.wrongList = S.generateNonRepeatingRandomNumbers(5, 5) S.wrongList = S.generateNonRepeatingRandomNumbers(5, 5)
S.showGame = true
S.setupTransitionOut(S.start)
S.play('startgame', 0) S.play('startgame', 0)
S.setupTransitionIn();
$timeout(() => {
S.showStart = false;
S.showGame = true;
S.setupTransitionOut();
}, S.transitionDuration);
} }
// Função para configurar a transição de entrada // Função para configurar a transição de entrada
@@ -187,6 +199,7 @@ S.derrotas = 0;
]; ];
var i = Math.floor(Math.random() * inList.length); var i = Math.floor(Math.random() * inList.length);
el.attr('transition-style', inList[i]); el.attr('transition-style', inList[i]);
el.css('--transition__duration', (S.transitionDuration / 1000) + 's');
} }
// Função para configurar a transição de saída // Função para configurar a transição de saída
@@ -199,6 +212,7 @@ S.derrotas = 0;
]; ];
var i = Math.floor(Math.random() * outList.length); var i = Math.floor(Math.random() * outList.length);
el.attr('transition-style', outList[i]); el.attr('transition-style', outList[i]);
el.css('--transition__duration', (S.transitionDuration / 1000) + 's');
S.botoesAtivos = true; S.botoesAtivos = true;
} }
@@ -259,30 +273,35 @@ S.derrotas = 0;
S.chamaResultado = function () { S.chamaResultado = function () {
if ($scope.quiz.pontuacao >= 3) { if ($scope.quiz.pontuacao >= 3) {
$timeout(() => { $timeout(() => {
S.vitorias++ S.setupTransitionIn();
S.salvarDadosJogos(); $timeout(() => {
S.victory = true S.vitorias++
S.showGame = false S.salvarDadosJogos();
if (S.quiz.pontuacao === 5) { S.victory = true
S.v5by5 = true S.showGame = false
S.play("success2", 1) if (S.quiz.pontuacao === 5) {
} else { S.v5by5 = true
S.play("success1", 1) S.play("success2", 1)
S.v5by5 = false } else {
} S.play("success1", 1)
S.v5by5 = false
}
S.setupTransitionOut();
}, S.transitionDuration);
}, 3000) }, 3000)
} else { } else {
$timeout(_ => { $timeout(_ => {
S.derrotas++ S.setupTransitionIn();
S.salvarDadosJogos(); $timeout(() => {
S.criarListaDinamica(10, '.circles2') S.derrotas++
S.victory = false S.salvarDadosJogos();
S.showGame = false S.victory = false
S.lose = true S.showGame = false
S.play('wawawa', 0.5) S.lose = true
S.play('wawawa', 0.5)
S.setupTransitionOut();
}, S.transitionDuration);
}, 3000) }, 3000)
// Adicione aqui qualquer outra lógica que você queira executar quando o jogador perder.
} }
}; };
@@ -327,8 +346,6 @@ S.derrotas = 0;
S.botoesAtivos = false S.botoesAtivos = false
S.respostaAtual = $scope.quiz.perguntas[$scope.quiz.perguntaAtual].respostas[indiceResposta]; S.respostaAtual = $scope.quiz.perguntas[$scope.quiz.perguntaAtual].respostas[indiceResposta];
S.botaoClicado = angular.element($evento.currentTarget); S.botaoClicado = angular.element($evento.currentTarget);
S.transition.removeClass('resposta-correta').removeClass('resposta-incorreta')
// Verifica se a resposta está correta // Verifica se a resposta está correta
if (S.respostaAtual.correta) { if (S.respostaAtual.correta) {
// Se a resposta estiver correta, altera a classe para verde // Se a resposta estiver correta, altera a classe para verde
@@ -336,7 +353,6 @@ S.derrotas = 0;
var pontuacaoDaResposta = 1 var pontuacaoDaResposta = 1
S.play('correct') S.play('correct')
S.botaoClicado.addClass('resposta-correta'); S.botaoClicado.addClass('resposta-correta');
S.transition.addClass('resposta-correta')
} else { } else {
@@ -345,7 +361,6 @@ S.derrotas = 0;
S.botaoClicado.addClass('resposta-incorreta'); S.botaoClicado.addClass('resposta-incorreta');
S.destacarRespostaCorreta() S.destacarRespostaCorreta()
S.erros++ S.erros++
S.transition.addClass('resposta-incorreta')
var pontuacaoDaResposta = 0 var pontuacaoDaResposta = 0
} }
@@ -354,26 +369,28 @@ S.derrotas = 0;
S.chamaResultado() S.chamaResultado()
} }
// Aguarda 4 segundos antes de passar para a próxima pergunta // Aguarda o tempo de feedback antes de passar para a próxima pergunta
$timeout(function () { $timeout(function () {
// Remove a classe para garantir que ela seja aplicada corretamente na próxima vez // Iniciar transição entre perguntas
S.botaoClicado.removeClass('resposta-correta').removeClass('resposta-incorreta'); S.setupTransitionIn();
// Atualizar pontuação $timeout(function () {
// No meio da transição (quando a tela estiver coberta), trocamos a pergunta
// Remove a classe para garantir que ela seja aplicada corretamente na próxima vez
S.botaoClicado.removeClass('resposta-correta').removeClass('resposta-incorreta');
// Passa para a próxima pergunta // Passa para a próxima pergunta
$scope.quiz.perguntaAtual++; $scope.quiz.perguntaAtual++;
$scope.quiz.perguntasRespondidas++; $scope.quiz.perguntasRespondidas++;
}, 3000); // Reseta posições e alturas se necessário
$timeout(()=>{ S.checarAlturaResposta();
S.checarAlturaResposta()
},3100)
$timeout(() => S.setupTransitionIn(), 2000);
$timeout(() => S.setupTransitionOut(), 3250); // Retira a transição
S.setupTransitionOut();
}, S.transitionDuration); // Tempo dinâmico baseado no config.json
}, S.feedbackDelay);
}; };
@@ -477,5 +494,5 @@ S.derrotas = 0;
} }
]) ])

2
templates/page.html
View File

@@ -61,6 +61,4 @@
<audio id="wawawa" src="audio/wawawa.mp3"></audio> <audio id="wawawa" src="audio/wawawa.mp3"></audio>
<audio id="startgame" src="audio/game-start.mp3"></audio> <audio id="startgame" src="audio/game-start.mp3"></audio>
<!-- Transition overlay básico -->
<div id="transition" transition-style="out:circle:bottom-right" style="pointer-events: none; opacity: 0;"></div>
</ion-view> </ion-view>