From 7d12b729bf0122494c3471526c59c57abb8a0f48 Mon Sep 17 00:00:00 2001 From: emse-p4a-gwu Date: Tue, 1 Oct 2024 14:10:09 -0400 Subject: [PATCH] added table version to w6 slides --- class/6-conjoint-questions/index.Rmd | 45 +-- class/6-conjoint-questions/index.html | 87 +++--- .../libs/kePrint/kePrint.js | 8 + .../libs/lightable/lightable.css | 272 ++++++++++++++++++ 4 files changed, 350 insertions(+), 62 deletions(-) create mode 100644 class/6-conjoint-questions/libs/kePrint/kePrint.js create mode 100644 class/6-conjoint-questions/libs/lightable/lightable.css diff --git a/class/6-conjoint-questions/index.Rmd b/class/6-conjoint-questions/index.Rmd index 81e644b..90b4a38 100644 --- a/class/6-conjoint-questions/index.Rmd +++ b/class/6-conjoint-questions/index.Rmd @@ -769,40 +769,44 @@ Renders as: --- -## .center[Show options in a table with `kable()`] - -.leftcol[ +## .center[Option: Show options in a table with `kable()`] ```{r} library(dplyr) -alts <- jsonlite::unserializeJSON(df_json) %>% - # Add $ sign to price - mutate(price = scales::dollar(price)) %>% +alts <- df %>% + filter(qID == 1) %>% + mutate( + # Add $ sign to price and html code for image path + price = paste(scales::dollar(price), "/ lb"), + image = paste0('')) %>% # Make nicer attribute labels select( - `Option:` = altID, - `Powertrain:` = powertrain, - `Price:` = price, - `Fuel Economy (mpg):` = fuelEconomy, - `Accel. Time (s):` = accelTime) + `Option:` = altID, + ` ` = image, + `Price:` = price, + `Type:` = type, + `Freshness:` = freshness) # Drop row names row.names(alts) <- NULL ``` -] +--- -.rightcol[ +## .center[Option: Show options in a table with `kable()`] Display the _transpose_, `t(alts)` ```{r} -kable(t(alts)) +kbl(t(alts), escape = FALSE) %>% + kable_styling( + bootstrap_options = c("striped", "hover", "condensed"), + full_width = FALSE, + position = "center" + ) ``` -] - --- class: inverse @@ -820,14 +824,13 @@ countdown( ## Your Turn -.leftcol80[ +With your team, choose a format to work with (buttons or table) for your choice question, then modify the example survey to match your project. -1. With your team, upload your `choice_questions.csv` file somewhere online (e.g. inside a formr run or on a GitHub repo). -2. Edit the `p2-choice-questions.qmd` or `p2-choice-questions-table.qmd` file to implement your choice questions in RMarkdown. +Survey versions: -You should be able to render the file to visually test how one of your choice questions is rendering. +## Buttons: [demo-choice-based-conjoint](https://github.com/surveydown-dev/demo-choice-based-conjoint/archive/refs/heads/main.zip) -] +## Table: [demo-choice-based-conjoint-table](https://github.com/surveydown-dev/demo-choice-based-conjoint-table/archive/refs/heads/main.zip) --- diff --git a/class/6-conjoint-questions/index.html b/class/6-conjoint-questions/index.html index b355add..b08d0d8 100644 --- a/class/6-conjoint-questions/index.html +++ b/class/6-conjoint-questions/index.html @@ -34,6 +34,8 @@ + + @@ -818,7 +820,7 @@ # Quiz 2 -
+
10:00
@@ -1198,7 +1200,7 @@ class: inverse -
+
20:00
@@ -1566,41 +1568,47 @@ --- -## .center[Show options in a table with `kable()`] - -.leftcol[ +## .center[Option: Show options in a table with `kable()`] ``` r library(dplyr) -alts <- jsonlite::unserializeJSON(df_json) %>% - # Add $ sign to price - mutate(price = scales::dollar(price)) %>% +alts <- df %>% + filter(qID == 1) %>% + mutate( + # Add $ sign to price and html code for image path + price = paste(scales::dollar(price), "/ lb"), + image = paste0('<img src="', image, '" width=100>')) %>% # Make nicer attribute labels select( - `Option:` = altID, - `Powertrain:` = powertrain, - `Price:` = price, - `Fuel Economy (mpg):` = fuelEconomy, - `Accel. Time (s):` = accelTime) + `Option:` = altID, + ` ` = image, + `Price:` = price, + `Type:` = type, + `Freshness:` = freshness) # Drop row names row.names(alts) <- NULL ``` -] +--- -.rightcol[ +## .center[Option: Show options in a table with `kable()`] Display the _transpose_, `t(alts)` ``` r -kable(t(alts)) +kbl(t(alts), escape = FALSE) %>% + kable_styling( + bootstrap_options = c("striped", "hover", "condensed"), + full_width = FALSE, + position = "center" + ) ``` -<table> +<table class="table table-striped table-hover table-condensed" style="color: black; width: auto !important; margin-left: auto; margin-right: auto;"> <tbody> <tr> <td style="text-align:left;"> Option: </td> @@ -1609,53 +1617,50 @@ <td style="text-align:left;"> 3 </td> </tr> <tr> - <td style="text-align:left;"> Powertrain: </td> - <td style="text-align:left;"> Gasoline </td> - <td style="text-align:left;"> Electric </td> - <td style="text-align:left;"> Gasoline </td> + <td style="text-align:left;"> </td> + <td style="text-align:left;"> <img src="images/gala.jpg" width="100"> </td> + <td style="text-align:left;"> <img src="images/honeycrisp.jpg" width="100"> </td> + <td style="text-align:left;"> <img src="images/gala.jpg" width="100"> </td> </tr> <tr> <td style="text-align:left;"> Price: </td> - <td style="text-align:left;"> $15 </td> - <td style="text-align:left;"> $20 </td> - <td style="text-align:left;"> $15 </td> + <td style="text-align:left;"> $1 / lb </td> + <td style="text-align:left;"> $1 / lb </td> + <td style="text-align:left;"> $2 / lb </td> </tr> <tr> - <td style="text-align:left;"> Fuel Economy (mpg): </td> - <td style="text-align:left;"> 30 </td> - <td style="text-align:left;"> 25 </td> - <td style="text-align:left;"> 25 </td> + <td style="text-align:left;"> Type: </td> + <td style="text-align:left;"> Gala </td> + <td style="text-align:left;"> Honeycrisp </td> + <td style="text-align:left;"> Gala </td> </tr> <tr> - <td style="text-align:left;"> Accel. Time (s): </td> - <td style="text-align:left;"> 6 </td> - <td style="text-align:left;"> 6 </td> - <td style="text-align:left;"> 6 </td> + <td style="text-align:left;"> Freshness: </td> + <td style="text-align:left;"> Average </td> + <td style="text-align:left;"> Excellent </td> + <td style="text-align:left;"> Average </td> </tr> </tbody> </table> -] - --- class: inverse -
+
20:00
## Your Turn -.leftcol80[ +With your team, choose a format to work with (buttons or table) for your choice question, then modify the example survey to match your project. -1. With your team, upload your `choice_questions.csv` file somewhere online (e.g. inside a formr run or on a GitHub repo). -2. Edit the `p2-choice-questions.qmd` or `p2-choice-questions-table.qmd` file to implement your choice questions in RMarkdown. +Survey versions: -You should be able to render the file to visually test how one of your choice questions is rendering. +## Buttons: [demo-choice-based-conjoint](https://github.com/surveydown-dev/demo-choice-based-conjoint/archive/refs/heads/main.zip) -] +## Table: [demo-choice-based-conjoint-table](https://github.com/surveydown-dev/demo-choice-based-conjoint-table/archive/refs/heads/main.zip) --- @@ -1663,7 +1668,7 @@ # .fancy[Break] -
+
05:00
diff --git a/class/6-conjoint-questions/libs/kePrint/kePrint.js b/class/6-conjoint-questions/libs/kePrint/kePrint.js new file mode 100644 index 0000000..e6fbbfc --- /dev/null +++ b/class/6-conjoint-questions/libs/kePrint/kePrint.js @@ -0,0 +1,8 @@ +$(document).ready(function(){ + if (typeof $('[data-toggle="tooltip"]').tooltip === 'function') { + $('[data-toggle="tooltip"]').tooltip(); + } + if ($('[data-toggle="popover"]').popover === 'function') { + $('[data-toggle="popover"]').popover(); + } +}); diff --git a/class/6-conjoint-questions/libs/lightable/lightable.css b/class/6-conjoint-questions/libs/lightable/lightable.css new file mode 100644 index 0000000..3be3be9 --- /dev/null +++ b/class/6-conjoint-questions/libs/lightable/lightable.css @@ -0,0 +1,272 @@ +/*! + * lightable v0.0.1 + * Copyright 2020 Hao Zhu + * Licensed under MIT (https://github.com/haozhu233/kableExtra/blob/master/LICENSE) + */ + +.lightable-minimal { + border-collapse: separate; + border-spacing: 16px 1px; + width: 100%; + margin-bottom: 10px; +} + +.lightable-minimal td { + margin-left: 5px; + margin-right: 5px; +} + +.lightable-minimal th { + margin-left: 5px; + margin-right: 5px; +} + +.lightable-minimal thead tr:last-child th { + border-bottom: 2px solid #00000050; + empty-cells: hide; + +} + +.lightable-minimal tbody tr:first-child td { + padding-top: 0.5em; +} + +.lightable-minimal.lightable-hover tbody tr:hover { + background-color: #f5f5f5; +} + +.lightable-minimal.lightable-striped tbody tr:nth-child(even) { + background-color: #f5f5f5; +} + +.lightable-classic { + border-top: 0.16em solid #111111; + border-bottom: 0.16em solid #111111; + width: 100%; + margin-bottom: 10px; + margin: 10px 5px; +} + +.lightable-classic tfoot tr td { + border: 0; +} + +.lightable-classic tfoot tr:first-child td { + border-top: 0.14em solid #111111; +} + +.lightable-classic caption { + color: #222222; +} + +.lightable-classic td { + padding-left: 5px; + padding-right: 5px; + color: #222222; +} + +.lightable-classic th { + padding-left: 5px; + padding-right: 5px; + font-weight: normal; + color: #222222; +} + +.lightable-classic thead tr:last-child th { + border-bottom: 0.10em solid #111111; +} + +.lightable-classic.lightable-hover tbody tr:hover { + background-color: #F9EEC1; +} + +.lightable-classic.lightable-striped tbody tr:nth-child(even) { + background-color: #f5f5f5; +} + +.lightable-classic-2 { + border-top: 3px double #111111; + border-bottom: 3px double #111111; + width: 100%; + margin-bottom: 10px; +} + +.lightable-classic-2 tfoot tr td { + border: 0; +} + +.lightable-classic-2 tfoot tr:first-child td { + border-top: 3px double #111111; +} + +.lightable-classic-2 caption { + color: #222222; +} + +.lightable-classic-2 td { + padding-left: 5px; + padding-right: 5px; + color: #222222; +} + +.lightable-classic-2 th { + padding-left: 5px; + padding-right: 5px; + font-weight: normal; + color: #222222; +} + +.lightable-classic-2 tbody tr:last-child td { + border-bottom: 3px double #111111; +} + +.lightable-classic-2 thead tr:last-child th { + border-bottom: 1px solid #111111; +} + +.lightable-classic-2.lightable-hover tbody tr:hover { + background-color: #F9EEC1; +} + +.lightable-classic-2.lightable-striped tbody tr:nth-child(even) { + background-color: #f5f5f5; +} + +.lightable-material { + min-width: 100%; + white-space: nowrap; + table-layout: fixed; + font-family: Roboto, sans-serif; + border: 1px solid #EEE; + border-collapse: collapse; + margin-bottom: 10px; +} + +.lightable-material tfoot tr td { + border: 0; +} + +.lightable-material tfoot tr:first-child td { + border-top: 1px solid #EEE; +} + +.lightable-material th { + height: 56px; + padding-left: 16px; + padding-right: 16px; +} + +.lightable-material td { + height: 52px; + padding-left: 16px; + padding-right: 16px; + border-top: 1px solid #eeeeee; +} + +.lightable-material.lightable-hover tbody tr:hover { + background-color: #f5f5f5; +} + +.lightable-material.lightable-striped tbody tr:nth-child(even) { + background-color: #f5f5f5; +} + +.lightable-material.lightable-striped tbody td { + border: 0; +} + +.lightable-material.lightable-striped thead tr:last-child th { + border-bottom: 1px solid #ddd; +} + +.lightable-material-dark { + min-width: 100%; + white-space: nowrap; + table-layout: fixed; + font-family: Roboto, sans-serif; + border: 1px solid #FFFFFF12; + border-collapse: collapse; + margin-bottom: 10px; + background-color: #363640; +} + +.lightable-material-dark tfoot tr td { + border: 0; +} + +.lightable-material-dark tfoot tr:first-child td { + border-top: 1px solid #FFFFFF12; +} + +.lightable-material-dark th { + height: 56px; + padding-left: 16px; + padding-right: 16px; + color: #FFFFFF60; +} + +.lightable-material-dark td { + height: 52px; + padding-left: 16px; + padding-right: 16px; + color: #FFFFFF; + border-top: 1px solid #FFFFFF12; +} + +.lightable-material-dark.lightable-hover tbody tr:hover { + background-color: #FFFFFF12; +} + +.lightable-material-dark.lightable-striped tbody tr:nth-child(even) { + background-color: #FFFFFF12; +} + +.lightable-material-dark.lightable-striped tbody td { + border: 0; +} + +.lightable-material-dark.lightable-striped thead tr:last-child th { + border-bottom: 1px solid #FFFFFF12; +} + +.lightable-paper { + width: 100%; + margin-bottom: 10px; + color: #444; +} + +.lightable-paper tfoot tr td { + border: 0; +} + +.lightable-paper tfoot tr:first-child td { + border-top: 1px solid #00000020; +} + +.lightable-paper thead tr:last-child th { + color: #666; + vertical-align: bottom; + border-bottom: 1px solid #00000020; + line-height: 1.15em; + padding: 10px 5px; +} + +.lightable-paper td { + vertical-align: middle; + border-bottom: 1px solid #00000010; + line-height: 1.15em; + padding: 7px 5px; +} + +.lightable-paper.lightable-hover tbody tr:hover { + background-color: #F9EEC1; +} + +.lightable-paper.lightable-striped tbody tr:nth-child(even) { + background-color: #00000008; +} + +.lightable-paper.lightable-striped tbody td { + border: 0; +} +