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

29
dados/config.json
View File

@@ -5,11 +5,16 @@
"texto_botao_iniciar": "INICIAR",
"texto_resultado_parabens": "Parabéns!",
"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": {
"transitionLogo": "img/ius_logo_branco.jpg",
"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_resultado": "img/quiz_LOGO_END.png",
"logo_patrocinador": "img/quiz_LOGO_TITLE.png",
@@ -17,20 +22,20 @@
},
"cores": {
"fundoPrincipal": "#83B81A",
"fundoEscuro": "#1e294a",
"fundoEscuro": "#83B81A",
"corFundoResultado": "#537813",
"textoPrincipal": "#FFFFFF",
"textoSecundario": "#263D6B",
"tituloCor": "#A1C633",
"btnIniciarFundo": "#A1C633",
"btnIniciarTexto": "#FFFFFF",
"corAcerto": "#20386f",
"textoSecundario": "#537813",
"tituloCor": "#FFFFFF",
"btnIniciarFundo": "#FFFFFF",
"btnIniciarTexto": "#537813",
"corAcerto": "#537813",
"corErro": "#702e21",
"alternativas": {
"A": "#cfd6e2",
"B": "#cfd6e2",
"C": "#cfd6e2",
"D": "#cfd6e2"
"A": "#FFFFFF",
"B": "#FFFFFF",
"C": "#FFFFFF",
"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

185
index.html
View File

@@ -1,109 +1,126 @@
<!DOCTYPE html>
<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>
S = {}
</script>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/lottie-player.js"></script>
<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">
<!-- 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> -->
<!-- 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
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- jsDelivr -->
<!-- <script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
<!-- jsDelivr -->
<!-- <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> -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ionic/css/style.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/css/transition-style.css">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
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>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ionic/css/style.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="lib/ionic/css/transition-style.css">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding {
padding-top: 20px;
}
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
.manual-remove-top-padding {
padding-top: 0px;
}
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
.manual-remove-top-padding .scroll {
padding-top: 0px !important;
}
<!-- Only required for Tab projects w/ pages in multiple tabs
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>
-->
</head>
<style>
/* Estilos para o overlay de transição */
#transition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9999;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
</head>
<style>
/* Estilos para o overlay de transição */
#transition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--cor-transition-bg);
z-index: 9999;
pointer-events: none;
clip-path: circle(125%);
display: flex;
align-items: center;
justify-content: center;
}
#transition.active {
opacity: 1;
}
</style>
<body animation="slide-left-right-ios7">
<div class="custom-bg-pattern" ></div>
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
#transition img {
max-width: 50%;
height: auto;
}
</style>
<body animation="slide-left-right-ios7">
<div id="transition" transition-style="">
<img src="img/ius_logo_branco.jpg">
</div>
</div>
</body>
<div>
<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>

97
js/controllers.js
View File

@@ -42,6 +42,9 @@ angular.module('app.controllers', [])
// Carregar os dados de parametrização global e aplicar ao tema
$http.get('dados/config.json').then(function (response) {
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)
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-erro', S.themeConfig.cores.corErro);
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 => {
rootNode.style.setProperty(`--cor-alt-${key.toLowerCase()}`, S.themeConfig.cores.alternativas[key]);
@@ -140,6 +144,10 @@ S.derrotas = 0;
// Atribuir os dados ao escopo
$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.wrongList = S.generateNonRepeatingRandomNumbers(5, 5)
S.showGame = true
S.setupTransitionOut(S.start)
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
@@ -187,6 +199,7 @@ S.derrotas = 0;
];
var i = Math.floor(Math.random() * inList.length);
el.attr('transition-style', inList[i]);
el.css('--transition__duration', (S.transitionDuration / 1000) + 's');
}
// 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);
el.attr('transition-style', outList[i]);
el.css('--transition__duration', (S.transitionDuration / 1000) + 's');
S.botoesAtivos = true;
}
@@ -259,30 +273,35 @@ S.derrotas = 0;
S.chamaResultado = function () {
if ($scope.quiz.pontuacao >= 3) {
$timeout(() => {
S.vitorias++
S.salvarDadosJogos();
S.victory = true
S.showGame = false
if (S.quiz.pontuacao === 5) {
S.v5by5 = true
S.play("success2", 1)
} else {
S.play("success1", 1)
S.v5by5 = false
}
S.setupTransitionIn();
$timeout(() => {
S.vitorias++
S.salvarDadosJogos();
S.victory = true
S.showGame = false
if (S.quiz.pontuacao === 5) {
S.v5by5 = true
S.play("success2", 1)
} else {
S.play("success1", 1)
S.v5by5 = false
}
S.setupTransitionOut();
}, S.transitionDuration);
}, 3000)
} else {
$timeout(_ => {
S.derrotas++
S.salvarDadosJogos();
S.criarListaDinamica(10, '.circles2')
S.victory = false
S.showGame = false
S.lose = true
S.play('wawawa', 0.5)
S.setupTransitionIn();
$timeout(() => {
S.derrotas++
S.salvarDadosJogos();
S.victory = false
S.showGame = false
S.lose = true
S.play('wawawa', 0.5)
S.setupTransitionOut();
}, S.transitionDuration);
}, 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.respostaAtual = $scope.quiz.perguntas[$scope.quiz.perguntaAtual].respostas[indiceResposta];
S.botaoClicado = angular.element($evento.currentTarget);
S.transition.removeClass('resposta-correta').removeClass('resposta-incorreta')
// Verifica se a resposta está correta
if (S.respostaAtual.correta) {
// Se a resposta estiver correta, altera a classe para verde
@@ -336,7 +353,6 @@ S.derrotas = 0;
var pontuacaoDaResposta = 1
S.play('correct')
S.botaoClicado.addClass('resposta-correta');
S.transition.addClass('resposta-correta')
} else {
@@ -345,7 +361,6 @@ S.derrotas = 0;
S.botaoClicado.addClass('resposta-incorreta');
S.destacarRespostaCorreta()
S.erros++
S.transition.addClass('resposta-incorreta')
var pontuacaoDaResposta = 0
}
@@ -354,26 +369,28 @@ S.derrotas = 0;
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 () {
// Remove a classe para garantir que ela seja aplicada corretamente na próxima vez
S.botaoClicado.removeClass('resposta-correta').removeClass('resposta-incorreta');
// Iniciar transição entre perguntas
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
$scope.quiz.perguntaAtual++;
$scope.quiz.perguntasRespondidas++;
// Passa para a próxima pergunta
$scope.quiz.perguntaAtual++;
$scope.quiz.perguntasRespondidas++;
// Reseta posições e alturas se necessário
S.checarAlturaResposta();
}, 3000);
$timeout(()=>{
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);
};

2
templates/page.html
View File

@@ -61,6 +61,4 @@
<audio id="wawawa" src="audio/wawawa.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>