library(shiny)
library(shinydashboard)
library(ggplot2)
#=========================ui========================================
ui <- dashboardPage(skin = "blue",
dashboardHeader(
title = tagList(
tags$span(
class = "logo-mini",
HTML("<span style='font-size:8px'>Urn Problems</span>)")
),
tags$span(
class = "logo-lg", "Urn Problems"
)
)
),
# ====================== Sidebar ========================
dashboardSidebar(
# create a sidebar
sidebarMenu(
# create sidebar menu items
menuItem(
"Introduction",
tabName = "Introduction",
icon = icon("info-circle")
),
menuItem(
HTML("Binomial <br>         Distribution"),
tabName = "Binomial",
icon = icon("menu-right", lib = "glyphicon"),
menuSubItem( HTML("The Binomial <br>        
Distribution"), tabName = "Binomial_dist"),
menuSubItem("The urn", tabName = "Binomial_urn")
),
menuItem(
HTML("Hypergeometric <br>         Distribution"),
tabName = "Hypergeometric",
icon = icon("menu-right", lib = "glyphicon"),
menuSubItem(HTML("The Hypergeometric <br>      
  Distribution"), tabName = "Hyper_dist"),
menuSubItem("The urn", tabName = "Hyper_urn")
),
menuItem(
HTML("Negative Binomial <br>         Distribution"),
tabName = "Geometric",
icon = icon("menu-right", lib = "glyphicon"),
menuSubItem( HTML("The Negative Binomial<br>        
Distribution"), tabName = "Geo_dist"),
menuSubItem("The urn", tabName = "Geo_urn")
),
menuItem(
HTML("Negative Hypergeometric <br>      
  Distribution"),
tabName = "Negative_Hypergeometric",
icon = icon("menu-right", lib = "glyphicon"),
menuSubItem(HTML("The Negative Hypergeometric <br>
        Distribution"),
tabName = "NegHyp_dist"),
menuSubItem("The urn", tabName = "NegHyp_urn")
),
menuItem("Your turn!", tabName = "Exercise",
icon = icon("pencil-square-o"))
)
),
# =========================== tagStyle ==================================
dashboardBody(
includeScript("../../../Matomo-tquant.js"),
tags$script(HTML("$('body').addClass('sidebar-mini');")),
tags$head(tags$style(
HTML(".main-header .logo {
font-weight: bold;
font-size: 22px;}")
)
),
tags$head(tags$style(
HTML(".content-wrapper {
background-color: #FFFFFF;}")
)
),
# change colors of the slider
tags$style(
HTML(".js-irs-0 .irs-single,
.js-irs-0 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-0 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-1 .irs-single,
.js-irs-1 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-1 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-2 .irs-single,
.js-irs-2 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-2 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-3 .irs-single,
.js-irs-3 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-3 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-4 .irs-single,
.js-irs-4 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-4 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-5 .irs-single,
.js-irs-5 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-5 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-6 .irs-single,
.js-irs-6 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-6 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-7 .irs-single,
.js-irs-7 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-7 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-8 .irs-single,
.js-irs-8 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML( ".js-irs-8 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-9 .irs-single,
.js-irs-9 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-9 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-10 .irs-single,
.js-irs-10 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-10 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-11 .irs-single,
.js-irs-11 .irs-bar-edge
{border: red; background: red}"
)
),
tags$style(
HTML(".js-irs-11 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-12 .irs-single,
.js-irs-12 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-12 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-13 .irs-single,
.js-irs-13 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-13 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-14 .irs-single,
.js-irs-14 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-14 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-15 .irs-single,
.js-irs-15 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-15 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-16 .irs-single,
.js-irs-16 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-16 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(
HTML(".js-irs-17 .irs-single,
.js-irs-17 .irs-bar-edge
{border: red;
background: red}"
)
),
tags$style(
HTML(".js-irs-17 .irs-bar
{background: red;
border-top: red;
border-bottom: red}"
)
),
tags$style(
HTML(".js-irs-18 .irs-single,
.js-irs-18 .irs-bar-edge
{border: blue;
background: blue}"
)
),
tags$style(
HTML(".js-irs-18 .irs-bar
{background: blue;
border-top: blue;
border-bottom: blue}"
)
),
tags$style(".fa-times {color:#c40505}"),
tags$style(".fa-check {color:#50ea0e}"),
tags$style(".fa-repeat {color:#0000c9}"),
tags$style(".fa-reply {color:#0000c9}"),
tags$head(tags$link(rel = "stylesheet",
type = "text/css", href = "style.css")
),
# =========================== Introduction ============
tabItems(
source(file.path("Layout", "Intro.R"), local = TRUE)$value,
# ====================== Binomial ========================================
source(file.path("Layout", "Binom.R"), local = TRUE)$value,
source(file.path("Layout", "Binom2.R"), local = TRUE)$value,
# ====================== Hypergeometric ===================================
source(file.path("Layout", "Hyper.R"), local = TRUE)$value,
source(file.path("Layout", "Hyper2.R"), local = TRUE)$value,
# ======================== Geometeric =====================================
source(file.path("Layout", "Geo.R"), local = TRUE)$value,
source(file.path("Layout", "Geo2.R"), local = TRUE)$value,
#==================================== Negative Hypergeometric =================
source(file.path("Layout", "Neg_Hyp.R"), local = TRUE)$value,
source(file.path("Layout", "Neg_Hyp2.R"), local = TRUE)$value,
#==================================== Exercise =================
source(file.path("Layout", "Exercise.R"), local = TRUE)$value
)
)
)
#=============================================================================
#====================================== server ===============================
#=============================================================================
server <- function(input, output, session) {
# session$onSessionEnded(stopApp)
# ==================================== Introduction ==========================
source(file.path("Calculation", "Intro.R"), local = TRUE)$value
# ================================ The Binomial distribution ===================
source(file.path("Calculation", "Binom.R"), local = TRUE)$value
# ==================================== Hypergeometric ==========================
source(file.path("Calculation", "Hyper.R"), local = TRUE)$value
# ===================================== Geometric =============================
source(file.path("Calculation", "Geo.R"), local = TRUE)$value
# ======================================= Negative Hypergeometric =============
source(file.path("Calculation", "Neg_Hyp.R"), local = TRUE)$value
#==================================== Exercise =================
source(file.path("Calculation", "Exercise.R"), local = TRUE)$value
}
shinyApp(ui = ui, server = server)