Skip to content

Commit

Permalink
added table version to w6 slides
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhelvy
jhelvy committed Oct 1, 2024
1 parent 148979b commit 7d12b72
Show file tree
Hide file tree
Showing 4 changed files with 350 additions and 62 deletions.
45 changes: 24 additions & 21 deletions class/6-conjoint-questions/index.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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('<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"
)
```

]

---

class: inverse
Expand All @@ -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)

---

Expand Down
87 changes: 46 additions & 41 deletions class/6-conjoint-questions/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
<meta property="article:author" content="John Paul Helveston"/>
<link href="libs/countdown/countdown.css" rel="stylesheet" />
<script src="libs/countdown/countdown.js"></script>
<script src="libs/kePrint/kePrint.js"></script>
<link href="libs/lightable/lightable.css" rel="stylesheet" />
<link rel="stylesheet" href="css/lexis.css" type="text/css" />
<link rel="stylesheet" href="css/lexis-fonts.css" type="text/css" />
</head>
Expand Down Expand Up @@ -818,7 +820,7 @@

# Quiz 2

<div class="countdown" id="timer_1baad1c0" data-warn-when="30" data-update-every="1" tabindex="0" style="bottom:0;left:0;font-size:4em;">
<div class="countdown" id="timer_1c6e3cb3" data-warn-when="30" data-update-every="1" tabindex="0" style="bottom:0;left:0;font-size:4em;">
<div class="countdown-controls"><button class="countdown-bump-down">&minus;</button><button class="countdown-bump-up">&plus;</button></div>
<code class="countdown-time"><span class="countdown-digits minutes">10</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>
Expand Down Expand Up @@ -1198,7 +1200,7 @@

class: inverse

<div class="countdown" id="timer_59b50618" data-warn-when="15" data-update-every="1" tabindex="0" style="top:0;right:0;font-size:2em;">
<div class="countdown" id="timer_a80c64a2" data-warn-when="15" data-update-every="1" tabindex="0" style="top:0;right:0;font-size:2em;">
<div class="countdown-controls"><button class="countdown-bump-down">&minus;</button><button class="countdown-bump-up">&plus;</button></div>
<code class="countdown-time"><span class="countdown-digits minutes">20</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>
Expand Down Expand Up @@ -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 &lt;- jsonlite::unserializeJSON(df_json) %&gt;%
# Add $ sign to price
mutate(price = scales::dollar(price)) %&gt;%
alts &lt;- df %&gt;%
filter(qID == 1) %&gt;%
mutate(
# Add $ sign to price and html code for image path
price = paste(scales::dollar(price), "/ lb"),
image = paste0('&lt;img src="', image, '" width=100&gt;')) %&gt;%
# 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) &lt;- 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) %&gt;%
kable_styling(
bootstrap_options = c("striped", "hover", "condensed"),
full_width = FALSE,
position = "center"
)
```

&lt;table&gt;
&lt;table class="table table-striped table-hover table-condensed" style="color: black; width: auto !important; margin-left: auto; margin-right: auto;"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align:left;"&gt; Option: &lt;/td&gt;
Expand All @@ -1609,61 +1617,58 @@
&lt;td style="text-align:left;"&gt; 3 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align:left;"&gt; Powertrain: &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Gasoline &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Electric &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Gasoline &lt;/td&gt;
&lt;td style="text-align:left;"&gt; &lt;/td&gt;
&lt;td style="text-align:left;"&gt; &lt;img src="images/gala.jpg" width="100"&gt; &lt;/td&gt;
&lt;td style="text-align:left;"&gt; &lt;img src="images/honeycrisp.jpg" width="100"&gt; &lt;/td&gt;
&lt;td style="text-align:left;"&gt; &lt;img src="images/gala.jpg" width="100"&gt; &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align:left;"&gt; Price: &lt;/td&gt;
&lt;td style="text-align:left;"&gt; $15 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; $20 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; $15 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; $1 / lb &lt;/td&gt;
&lt;td style="text-align:left;"&gt; $1 / lb &lt;/td&gt;
&lt;td style="text-align:left;"&gt; $2 / lb &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align:left;"&gt; Fuel Economy (mpg): &lt;/td&gt;
&lt;td style="text-align:left;"&gt; 30 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; 25 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; 25 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Type: &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Gala &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Honeycrisp &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Gala &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align:left;"&gt; Accel. Time (s): &lt;/td&gt;
&lt;td style="text-align:left;"&gt; 6 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; 6 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; 6 &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Freshness: &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Average &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Excellent &lt;/td&gt;
&lt;td style="text-align:left;"&gt; Average &lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

]

---

class: inverse

<div class="countdown" id="timer_3cba19fd" data-warn-when="15" data-update-every="1" tabindex="0" style="top:0;right:0;font-size:2em;">
<div class="countdown" id="timer_5259e412" data-warn-when="15" data-update-every="1" tabindex="0" style="top:0;right:0;font-size:2em;">
<div class="countdown-controls"><button class="countdown-bump-down">&minus;</button><button class="countdown-bump-up">&plus;</button></div>
<code class="countdown-time"><span class="countdown-digits minutes">20</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>

## 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)

---

class: inverse, center

# .fancy[Break]

<div class="countdown" id="timer_46f87a10" data-update-every="1" tabindex="0" style="top:1;right:0;bottom:0;left:0;margin:5%;font-size:8em;">
<div class="countdown" id="timer_9d3fd1b4" data-update-every="1" tabindex="0" style="top:1;right:0;bottom:0;left:0;margin:5%;font-size:8em;">
<div class="countdown-controls"><button class="countdown-bump-down">&minus;</button><button class="countdown-bump-up">&plus;</button></div>
<code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>
Expand Down
8 changes: 8 additions & 0 deletions class/6-conjoint-questions/libs/kePrint/kePrint.js
View file
Original file line number Diff line number Diff line change
@@ -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();
}
});
Loading

0 comments on commit 7d12b72

Please sign in to comment.