Skip to content

Commit

Permalink
atualizando
Browse files Browse the repository at this point in the history
  • Loading branch information
@sibellyvih
sibellyvih authored Sep 13, 2024
1 parent a4987dd commit c49ea7b
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 26 deletions.
84 changes: 74 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="recet.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<title>Projeto Eco Board Game</title>
</head>
<body>
Expand Down Expand Up @@ -50,6 +51,7 @@ <h2>Introdução</h2>
<li>Graças a massificação das <strong>tecnologias digitais de informação e comunicação (TDIC)</strong>, as barreiras temporais e mesmo as espaciais começaram a ser eliminadas, estabelecendo práticas pedagógicas diferenciadas e metodologias inovadoras.</li>
<li><strong>Jogos digitais</strong> como objeto de aprendizagem.</li>
</ul>
</section>

<div class="R">
<h2>Os 5 R's da sustenbilidade</h2>
Expand Down Expand Up @@ -113,7 +115,6 @@ <h4 class="aba-couteudo-titulo-secundario">...</h4>
</div>
</section>
<script src="main.js"></script>
</section>

<section class="Objetivos">
<h2>Objetivos</h2>
Expand All @@ -131,40 +132,62 @@ <h2>Objetivos</h2>
<h2>Metodologia</h2>
<div class="conteudo-metodologia">
<div class="jogo-fisico">
<h3>Jogo físico</h3>
<h2>Jogo físico</h2>
<figure>
<img class="img-metodologia" src="foto-sibelly.jpeg" alt="Criadora com o jogo físico">
<figcaption>Fonte: Autoral.</figcaption>
</figure>
<ul>
<li>Canva como principal plataforma utilizada;</li>
<li>Desenvolvimento do banner;</li>
<li>Criação das cartas;</li>
<li>Tampinhas de garrafa como peões;</li>
<li>Dado grande feito de EVA.</li>
</ul>
</div>
</div>
<div class="conteudo-metodologia">
<div class="jogo-digital">
<h3>Jogo digital</h3>
<h4>Desenvolvido no Scratch</h4>
<h2>Jogo digital</h2>
<figure>
<img class="img-metodologia" src="2 - Game.png" alt="Tabuleiro do jogo no Scratch">
<figcaption>Fonte: Autoral.</figcaption>
</figure>

</figure>
<figure>
<img class="img-metodologia" src="Jogo de tabuleiro da sustentabilidade.png" alt="Tabuleiro do jogo">
<figcaption>Fonte: Autoral.</figcaption>
</figure>

<ul>
<li>Desenvolvido no <strong>Scratch</strong>;</li>
<li>Versão simplificada;</li>
<li>Imagens e sprites criados na plataforma;</li>
<li>Sons utilizados da biblioteca;</li>
<li>Intruções e regras todas explicadas pelo Tio Green.</li>
</ul>

</div>
</div>
<div class="conteudo-metodologia">
<div class="site">
<h3>Site</h3>
<h4>Programado no VS Code</h4>
<h4>Postado no GitHub</h4>
<h2>Site</h2>
<figure>
<img class="img-metodologia" src="vc code.png" alt="programação do site">
<figcaption>Fonte: Autoral.</figcaption>
</figure>
<ul>
<li>Programado no VS Code;</li>
<li>Linguagens usadas: HTML, CSS e JavaScript;</li>
<li>Postado em um repositório no GitHub.</li>
</ul>
</div>
</div>
</section>

<section class="Resultados">
<h2>Conclusão</h2>
<li>Acreditamos que contribuímos significativamente para a formação desses alunos como cidadãos conscientes e comprometidos com a proteção do nosso planeta.</li>
<li>Contribuímos significativamente para a formação desses alunos como cidadãos conscientes e comprometidos com a proteção do nosso planeta.</li>
<li> Este projeto é um passo inicial importante para valorizar o ensino da educação ambiental nas escolas, de maneira que os alunos permaneçam engajados e motivados a aprender mais sobre sustentabilidade e seus princípios.</li>
<li>Efeitos positivos que foram notados nos alunos após a aplicação do jogo:</li>
<div class="botoes">
Expand All @@ -174,10 +197,51 @@ <h2>Conclusão</h2>
<button class="botao">Trabalharam em equipe</button>
<button class="botao">Adquiriram ética ambiental</button>
</div>

<h2>Questões acertadas</h2>
<ul>
<li>11 equipes jogaram;</li>
<li>Todas as equipes responderam pelo menos uma questão;</li>
<li>Apenas uma equipe errou uma questão;</li>
<li>90% da turma acertou.</li>
</ul>

<canvas id="meuGrafico"></canvas>

<script>
var ctx = document.getElementById('meuGrafico').getContext('2d');
var meuGrafico = new Chart(ctx, {
type: 'pie', // Tipo de gráfico
data: {
labels: ['Questões acertadas', 'Questões erradas'], // Rótulos
datasets: [{
label: 'Quantidade de equipes',
data: [10, 1], // Dados para o gráfico
backgroundColor: [
'green',
'red'
],
borderColor: [
'green',
'red'
],
borderWidth: 1
}]
},
options: {
responsive: true, // Gráfico responsivo
plugins: {
legend: {
position: 'top', // Posição da legenda
}
}
}
});
</script>


<div class="imagens-conclusão">


<div class="carousel-container">
<div class="carousel-controls left" onclick="changeDepoimento(-1)">&#10094;</div>

Expand Down
53 changes: 37 additions & 16 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,8 +174,8 @@ img {
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 2000px;
margin: 0 auto;
width: 100%;
margin: 0;
padding: 20px 0;
}

Expand Down Expand Up @@ -289,29 +289,45 @@ font-size: 22px;
}

.Metodologia {
width: 60%;
margin: 0 auto;
width: 100%;
margin: 0;
text-align: center;
position: relative; /* Adicionado para posicionar as setas */
padding: 50px;
padding: 30px;
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

.img-metodologia {
max-width: 500px;
max-height: 450px;
margin: auto;
display: block;
max-width: 300px;
margin-right: 20px; /* Espaço entre a imagem e a lista */
}

.conteudo-metodologia {
display: flex;
align-items: center; /* Alinhar verticalmente */
gap: 20px; /* Espaçamento entre texto e imagem */
display: flex; /* Flexbox aplicado aqui para alinhar conteúdo */
justify-content: space-between; /* Espaço entre a lista e a imagem */
align-items: flex-start; /* Alinhamento no topo */
margin-bottom: 30px; /* Espaçamento entre blocos de conteúdo */
padding: 20px;
}

.Metodologia ul {
text-align: left; /* Alinhar o texto da lista à esquerda */
padding: 0;
margin: 0;
list-style: none;
}

.Metodologia li {
font-size: 22px;
padding: 10px 80px;
font-size: 18px;
margin-bottom: 10px;
}

.jogo-fisico, .jogo-digital, .site {
display: flex;
flex-direction: row; /* Garantir que a imagem e o texto fiquem lado a lado */
justify-content: center;
align-items: flex-start;
width: 100%; /* Garantir que o conteúdo use toda a largura disponível */
}

.Resultados {
Expand All @@ -330,6 +346,11 @@ font-size: 22px;
text-decoration: none;
}

#meuGrafico {
width: 6%; /* Ajuste a largura */
height: 5%;
}

.Resultados img {
display: block;
padding: 25px;
Expand Down Expand Up @@ -449,4 +470,4 @@ blockquote {
font-size: 13px;
margin: 20px 0 0;
padding: 10px;
}
}

0 comments on commit c49ea7b

Please sign in to comment.