Commit e8fc76f3 authored by gabriel sartori's avatar gabriel sartori

Merge branch 'master' of gitlab.c3sl.ufpr.br:pet-estatistica/stats-games

parents e3d09d24 5fcebebc
This diff is collapsed.
## Divulgação dos jogos em Estatística
<img src="http://200.17.213.89/~eduardo/foo/stats-games.svg"
width=150px align="right" display="block">
Jogos apresentados na feira de cursos e profissões de 2015
# Jogos Interativos em Estatística #
# Plano de Trabalho
[Eduardo E. R. Junior](https://gitlab.c3sl.ufpr.br/u/eerj12),
PET-Estatística UFPR
[Gabriel S. Klostermann](https://gitlab.c3sl.ufpr.br/u/gsk12),
PET-Estatística UFPR
Criação e revisão dos textos nos 4 jogos - 18/12
Jogos disponíveis em http://shiny.leg.ufpr.br/pet-estatistica/stats-games
Filmagem na Sala do PET - 21/12
\ No newline at end of file
****
## Sobre o projeto ##
> No futuro, o pensamento estatístico será tão necessário para
> cidadania eficiente como saber ler e escrever. (H. G. Wells)
Pegando gancho na frase do escritor H. G. Wells, autor das obras _A
Guerra dos Mundos_, _A Máquina do Tempo_, entre outras, em que o autor
ressalta a importância do pensamento estatístico, tem-se como realidade
nacional algo muito distante da visão do escritor. Infelizmente nosso
ensino básico é falho na apresentação da Estatística, são poucos os que
se aventuram em cursos de graduação e assim tem contato com formas de
pensar em torno da incerteza.
Na Universidade Federal do Paraná (UFPR), temos a tradicional
[Feira de Cursos e Profissões], onde os cursos de graduação preparam
seus estandes para apresentar à comunidade, principalmente alunos do
ensino médio candidatos do vestibular. E foi neste evento que o grupo
[PET-Estatística] viu a oportunidade de apresentar, de uma forma
diferente, a Estatística aos que não tiveram contato com ela.
Nesta edição de 2015 da Feira pensamos na elaboração de jogos
interativos _web_, onde pequenos conceitos à respeito da incerteza são
apresentados informalmente. Os jogos foram implementados utilizando o
_software_ estatístico R e a biblioteca `shiny`, para construção de
aplicações _web_. Foram ao todo 4 jogos implementados e agrupamos todos
em uma mesma página disponibilizando-a em um servidor do LEG/PET
devidamente equipado com o R e o Shiny, os jogos podem ser acessados
desde então então disponível através do endereço
http://shiny.leg.ufpr.br/pet-estatistica/stats-games .
Com felicidade destacamos o sucesso do estande de Estatística neste
evento, alguns registros podem ser vistos no [post do PET] sobre o fato.
Em especial os jogos interativos ganharam destaque entre os
participantes da feira e, após o evento, entre os alunos e docentes do
curso. Com isso pensamos em formalizar o projeto e disponibilizá-lo para
que outros entusiastas na divulgação Estatísticas possam usufruir dos
jogos e assim criamos o `stats-games`, para juntar a documentação e
códigos-fonte dos jogos.
Para melhor organização do repositório agrupamos os códigos-fonte e a
documentação de cada jogo em um diretório dedicado, são quatro ao todo:
`./altura/`, `./moeda/`, `./pontos/`, `./regressao/`. Ainda temos o
diretório `./stats-games/` em que juntamos todos os jogos em uma única
aplicação. Os arquivos que descrevem o projeto são deixadas na raiz são
eles `./README.md`, `./CONTRIBUTING.md` e `./LICENSE.md`.
O projeto foi desenvolvido no serviço [GitLab do C3SL] (Centro de
Computação Científica e Software Livre) e mantido também como
repositório da organização [PET Estatística no GitHub]. Todas as
contribuições para o projeto são bem vindas, desde correções de _bugs_
até sugestões de implementação.
****
## Licença ##
Este projeto é distribuído sob uma licença
[GNU General Public License, versão 2], descrita no arquivo
`LICENSE.md`, © 2015 E. E., Ribeiro Jr \& G. S., Klostermann.
<!-- Links -->
[Feira de Cursos e Profissões]: http://www.feiradecursos.ufpr.br/
[PET-Estatística]: http://www.pet.est.ufpr.br/
[post do PET]: http://www.pet.est.ufpr.br/?p=2831
[GitLab do C3SL]: https://gitlab.c3sl.ufpr.br/groups/pet-estatistica
[PET Estatística no GitHub]: https://github.com/pet-estatistica
[GNU General Public License, versão 2]:
ttp://www.gnu.org/licenses/old-licenses/gpl-2.0.html
This diff is collapsed.
......@@ -9,10 +9,6 @@ padding-left: 20px; padding-right: 20px\">
<p> Um dos objetos mais usados para ensino de Estatística e
Probabilidade é a moeda. Mas será que vc consegue imitar pelo menos
20 lançamentos de uma moeda honesta?
<p> É sob este questionamento que se pensou neste aplicativo. O
objetivo do jogador aqui é imitar uma moeda honesta em pelo menos
20 lançamentos.
</p>
</div>
"
......
---
output:
html_document
runtime: shiny
---
<style type="text/css">
body, td, caption {
font-family: "Ubuntu";
background-color: #FFF;
font-size: 15px;
}
.sidebar {
color: #FFF;
position: fixed;
width: 200px;
white-space: nowrap;
overflow: visible;
}
iframe {
width: 100%;
height: 800px;
overflow: hidden;
margin-left: 0px;
margin-right: 0px;
}
table.header {
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 1em;
background-color: rgba(0, 0, 0, 0);
border: none;
border-top: 3px solid #216778;
border-bottom: 3px solid #216778;
border-left: 0px;
border-right: 0px;
border-collapse: collapse;
width: 100%;
}
td.header {
border-bottom: 0px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0);
}
h1.header {
color: #333;
font-size: 1.8em;
line-weight: 0em;
}
h2.header {
color: rgba(83, 83, 83, 0.8);
background-color: #fff;
font-size: 1.5em;
font-family: Ubuntu Mono;
}
</style>
<center>
<table class = 'header'>
<td class = 'header', align = 'center'>
<h1 class = 'header'>
Jogos Interativos em Estatística
</h1> <h2 class = 'header'>
Divirta-se com a incerteza
</h2> </td>
<td class = 'header'>
<img src = 'http://200.17.213.89/~pet-estatistica/figures/stats-games.svg'
height = '128' width = '128'> </img>
</td>
</table>
</center>
```{r, echo = FALSE, message = FALSE}
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(titleWidth = 0),
##-------------------------------------------
## Menu lateral para acesso aos jogos
dashboardSidebar(
width = 165,
sidebarMenu(
menuItem(
text = "Início",
tabName = "home",
icon = icon("fa fa-home")
),
menuItem(
text = "Regressão",
tabName = "regressao",
icon = icon("fa fa-gamepad")
),
menuItem(
text = "Pontos Aleatórios",
tabName = "pontos",
icon = icon("fa fa-gamepad")
),
menuItem(
text = "Estimando Alturas",
tabName = "altura",
icon = icon("fa fa-gamepad")
),
menuItem(
text = "Imite uma moeda",
tabName = "moeda",
icon = icon("fa fa-gamepad")
)
)
),
## Corpo da aplicação, reativo às escolhas do menu lateral,
## nesta parte necessitamos da url dos jogos rodando em algum
## servidor.
dashboardBody(
##-------------------------------------------
## Inclui estilo: cores e tamanho
tags$head(
includeCSS('dash.css')
),
##-------------------------------------------
## Incluindo os jogos
tabItems(
tabItem(
tabName = "home",
uiOutput("homepage")
),
tabItem(
tabName = "regressao",
HTML("<iframe scrolling='no' frameborder='0'
src = 'http://shiny.leg.ufpr.br/pet-estatistica/regressao'>
</iframe>")
),
##-------------------------------------------
tabItem(
tabName = "pontos",
HTML("<iframe scrolling='no' frameborder='0'
src = 'http://shiny.leg.ufpr.br/pet-estatistica/pontos'>
</iframe>")
),
##-------------------------------------------
tabItem(
tabName = "altura",
HTML("<iframe scrolling='no' frameborder='0'
src = 'http://shiny.leg.ufpr.br/pet-estatistica/altura'>
</iframe>")
),
##-------------------------------------------
tabItem(
tabName = "moeda",
HTML("<iframe scrolling='no' frameborder='0'
src = 'http://shiny.leg.ufpr.br/pet-estatistica/moeda'>
</iframe>")
)
)
)
)
server <- function(input, output) {
output$homepage <- renderUI({
includeMarkdown("home.md")
})
}
shinyApp(
ui = ui, server = server
## options = list(height=1000, width=700)
)
```
/*
======================================================================
Eduardo Junior
eduardo.jr@ufpr.br
01-09-2015
Definições de estilo CSS para o dashboard shiny
O arquivo de estilo default é armazenado junto aos arquivos do pacote
shinydashboard - .../shinydashboard/AdminLTE/AdminLTE.css
======================================================================
*/
body, td, caption {
font-family: "Ubuntu", "Book Antiqua", Palatino, serif;
background-color: white;
font-size: 13px;
}
iframe {
width: 100%;
height: 700px;
scrolling: no;
frameborder: 0;
}
.main-header .sidebar-toggle {
float: left;
background-color: #73C1D4;
padding: 15px 40px;
margin-left: -30px;
}
.skin-blue .main-header .navbar {
color:black;
background-color: #d2d6de;
}
.skin-blue .main-sidebar {
color:black;
background-color: #fff;
}
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
color:black;
background-color: #fff;
}
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: white;
}
.content-wrapper,
.right-side {
min-height: 100%;
background-color: #fff;
z-index: 800;
}
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
color:black;
background-color: #73C1D4;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover {
background-color: #216778;
}
.skin-blue .main-header .navbar .sidebar-toggle {
color: #000;
}
<style type="text/css">
code {
padding: 2px 4px;
font-size: 90%;
font-weight: bold;
color: #216778;
background-color: #F9F2F4;
border-radius: 4px;
}
</style>
# Projeto `stats-games` #
<img src="http://200.17.213.89/~pet-estatistica/figures/ufpr-pet.svg"
width=200px align="right" display="block">
****
* **Autores**: Eduardo E. R. Junior \& Gabriel S. Klostermann
* **Contato**: edujrrib@gmail.com
* **Instituição**: PET-Estatística da Universidade Federal do Paraná
* **Código-fonte**: Disponível no [GitHub] e [GitLab]
Este projeto visa a coleção de jogos interativos para a divulgação
Estatística para a comunidade, com foco em alunos do ensino médio.
Todos os jogos foram implementados em R utilizando principalmente a
biblioteca `shiny`. O código-fonte, bem como o material de apoio destes
jogos, podem ser vistos nos sistemas _web_ de versionamento [GitHub] e
[GitLab]. Qualquer contribuição é bem vinda!
[GitHub]: https://github.com/pet-estatistica
[GitLab]: https://gitlab.c3sl.ufpr.br/groups/pet-estatistica
/*
======================================================================
Eduardo Junior
eduardo.jr@ufpr.br
01-09-2015
Definições de estilo CSS para o documento Rmarkdown
O arquivo de estilo default é armazenado junto aos arquivos do pacote
markdown - .../markdown/resources/markdown.css
======================================================================
*/
body, td, caption {
font-family: "Ubuntu", "Book Antiqua", Palatino, serif;
background-color: white;
font-size: 20px;
}
.sidebar {
color: #FFF;
position: fixed;
width: 200px;
white-space: nowrap;
overflow: visible;
}
iframe {
width: 1000px;
height: 700px;
overflow: hidden;
margin-left: -50px;
margin-right: -50px;
}
table.iguir {
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 1em;
background-color: rgba(0, 0, 0, 0);
border: none;
border-top: 4px solid #A96CBA;
border-bottom: 4px solid #A96CBA;
border-left: 0px;
border-right: 0px;
border-collapse: collapse;
width: 80%;
}
td.iguir {
border-bottom: 0px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0);
}
h1.iguir {
color: black;
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
font-size: 1.8em;
font-family: Ubuntu;
}
h2.iguir {
color: rgba(83, 83, 83, 0.8);
background-color: rgba(0, 0, 0, 0);
font-weight: bold;
font-size: 1.5em;
font-family: Ubuntu;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment