diff --git a/.gitignore b/.gitignore index b3c892c9..a0ce9e06 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,5 @@ _site .Rhistory site_libs -.claude -CLAUDE.md /.quarto/ **/*.quarto_ipynb diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..e0596894 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,75 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +This is the source code for the [surveydown.org](https://surveydown.org/) website, which documents the surveydown R package for creating online surveys. The site is built using **Quarto** and deployed via **Netlify**. + +**surveydown** is a platform that combines: +- **Quarto** for designing surveys using markdown and R code +- **Shiny** for rendering surveys as interactive web applications +- **PostgreSQL/Supabase** for storing survey response data + +## Common Commands + +### Building and Previewing +- `quarto render` - Render the entire website to `_site/` directory +- `quarto preview` - Start local development server (port 5678 by default) +- `quarto preview --port 5678` - Preview with specific port (as configured in _quarto.yml) + +### Development Workflow +- Edit `.qmd` files in root, `docs/`, `blog/`, or `templates/` directories +- Use `quarto preview` for live development with auto-refresh +- The `chunks/` directory contains reusable content snippets included via `{{< include >}}` + +## Architecture + +### File Structure +- **_quarto.yml** - Main Quarto project configuration with website structure, navigation, and rendering options +- **docs/*.qmd** - Documentation pages covering surveydown features and usage +- **templates/*.qmd** - Live examples and templates for different survey types +- **blog/*.qmd** - Blog posts and announcements +- **css/** - Custom styling (surveydown.css, templates.css, theme.scss) +- **chunks/** - Reusable content snippets included across pages +- **images/** - Static assets including logos, screenshots, and diagrams +- **_site/** - Generated website output (git-ignored) + +### Key Architecture Concepts +- **Documentation structure**: Organized into logical sections (Survey Basics, Question Development, Survey Design Concepts, etc.) as defined in the sidebar navigation +- **Template system**: Live, interactive examples hosted on shinyapps.io and embedded via iframes +- **Content reuse**: Common content stored in `chunks/` and included via Quarto's include directive +- **R dependencies**: Listed in DESCRIPTION file, includes core packages like surveydown, dplyr, leaflet, plotly + +### Navigation Structure +The site uses a two-sidebar approach: +1. **Documentation sidebar**: Hierarchical navigation for all docs content +2. **Templates sidebar**: Categorized examples (Basic, Randomization, Reactivity, Conjoint, Custom) + +### Styling System +- Uses Quarto's theme system with Bootstrap 5 +- Light/dark theme support via flatly/darkly themes +- Custom SCSS in `css/theme.scss` +- Template-specific styles in `css/templates.css` +- Documentation styles in `css/surveydown.css` + +## Content Development + +### Adding Documentation +1. Create new `.qmd` file in `docs/` +2. Add navigation entry to `_quarto.yml` sidebar +3. Use existing content structure and styling patterns +4. Include reusable chunks from `chunks/` when appropriate + +### Adding Templates +1. Create new `.qmd` file in `templates/` +2. Add metadata (title, date, categories, image, description) +3. Include link to live demo and GitHub repo +4. Add iframe embed of live template +5. Update `_quarto.yml` templates sidebar navigation + +### R Code Integration +- R code blocks are set to `eval: false` by default (see _quarto.yml execute settings) +- Use `#| eval: true` for blocks that should execute +- Common R setup in `_common.R` for shared functions +- Knitr options configured for clean output formatting \ No newline at end of file diff --git a/_quarto.yml b/_quarto.yml index 3c230bca..f425051e 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -10,6 +10,7 @@ project: website: title: surveydown.org + llms-txt: true image: images/logo.ico favicon: images/logo.ico site-url: https://www.surveydown.org diff --git a/css/templates.css b/css/templates.css index 0f347af4..097e0871 100644 --- a/css/templates.css +++ b/css/templates.css @@ -1,57 +1,47 @@ /* Import Font Awesome */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'); -.template-iframe-container { +/* Icon-only links appended to the end of the page title (GitHub repo and, + when present, the live demo). Soft rounded Lucide tiles, sized relative + to the title so they scale across breakpoints. */ +#title-block-header h1.title .title-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.05em; /* relative to the title; ~ matches cap height */ + height: 1.05em; + margin-left: 0.3em; + border-radius: 0.22em; + background: rgba(24, 188, 156, 0.13); /* tint of the site accent #18bc9c */ + color: #18bc9c; + vertical-align: middle; position: relative; - width: 100%; - padding-bottom: 75%; /* Default 4:3 ratio for larger screens */ - margin: 20px 0; - border: 1px solid #dee2e6; -} - -.template-iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; + top: -0.06em; /* nudge up to optically center against the caps */ + text-decoration: none; + transition: background 0.15s ease, color 0.15s ease; } -/* For mobile screens (width less than 768px) */ -@media screen and (max-width: 768px) { - .template-iframe-container { - padding-bottom: 150%; /* 2:3 vertical ratio for mobile */ - } +#title-block-header h1.title .title-icon svg { + width: 0.74em; + height: 0.74em; } -.button-container { - display: flex; - justify-content: center; - gap: 1rem; - margin: 1rem 0; +#title-block-header h1.title .title-icon:hover { + background: rgba(24, 188, 156, 0.24); + color: #12a589; } -.template-button { - display: inline-flex; - align-items: center; - justify-content: center; - text-align: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - background-color: #4a5568; - color: white; - text-decoration: none; - border-radius: 0.375rem; - transition: background-color 0.2s; -} - -.template-button:hover { - background-color: #2d3748; - color: white; - text-decoration: none; +.template-video { + display: block; + width: 100%; + aspect-ratio: 16 / 9; /* match the 16:9 walkthrough recordings */ + margin: 20px 0; + border: 1px solid #dee2e6; + background: #000; } -.template-button i { - font-size: 1rem; +/* Hide Chrome's central overlay play button, which dims the frame on hover. + The bottom controls bar (with its own play button) remains. */ +.template-video::-webkit-media-controls-overlay-play-button { + display: none; } diff --git a/templates/_metadata.yml b/templates/_metadata.yml index 224a5b60..7f5fe739 100644 --- a/templates/_metadata.yml +++ b/templates/_metadata.yml @@ -8,4 +8,33 @@ include-in-header: #title-block-header.quarto-title-block.default .quarto-title-meta { display: none; } - \ No newline at end of file + +include-after-body: + text: | + \ No newline at end of file diff --git a/templates/conditional_showing.qmd b/templates/conditional_showing.qmd index fd20cc89..55aa2b82 100644 --- a/templates/conditional_showing.qmd +++ b/templates/conditional_showing.qmd @@ -6,7 +6,11 @@ image: banners/conditional_showing.png description: "A template for [conditional showing](/docs/conditional-logic.html#conditional-showing)." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown.shinyapps.io/conditional_showing/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_conditional_showing){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Conditional logic: conditional showing](/docs/conditional-logic.html#conditional-showing) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/conditional_skipping.qmd b/templates/conditional_skipping.qmd index d0d08890..7b9cfa49 100644 --- a/templates/conditional_skipping.qmd +++ b/templates/conditional_skipping.qmd @@ -6,7 +6,11 @@ image: banners/conditional_skipping.png description: "A template for [conditional skipping](/docs/conditional-logic.html#conditional-skipping)." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown.shinyapps.io/conditional_skipping/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_conditional_skipping){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Conditional logic: conditional skipping](/docs/conditional-logic.html#conditional-skipping) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/conditional_stopping.qmd b/templates/conditional_stopping.qmd index 1417524a..4144b98e 100644 --- a/templates/conditional_stopping.qmd +++ b/templates/conditional_stopping.qmd @@ -1,12 +1,16 @@ --- title: "Conditional Stopping" date: 2025-01-05 -categories: [Conditions] +categories: [Conditions, Live Demo] image: banners/conditional_stopping.png description: "A template for [conditional stopping](/docs/conditional-logic.html#conditional-stopping)." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown2.shinyapps.io/conditional_stopping/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_conditional_stopping){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Conditional logic: conditional stopping](/docs/conditional-logic.html#conditional-stopping) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/conjoint_buttons.qmd b/templates/conjoint_buttons.qmd index d38f3408..022c6207 100644 --- a/templates/conjoint_buttons.qmd +++ b/templates/conjoint_buttons.qmd @@ -6,7 +6,11 @@ image: banners/conjoint_buttons.png description: "A conjoint survey template with options shown in buttons." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,12 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown3.shinyapps.io/conjoint_buttons/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_conjoint_buttons){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/conjoint_tables.qmd b/templates/conjoint_tables.qmd index 26baf662..0675d9e1 100644 --- a/templates/conjoint_tables.qmd +++ b/templates/conjoint_tables.qmd @@ -6,7 +6,11 @@ image: banners/conjoint_tables.png description: "A conjoint survey template, with option contents shown in a table." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,12 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown3.shinyapps.io/conjoint_tables/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_conjoint_tables){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/custom_leaflet_map.qmd b/templates/custom_leaflet_map.qmd index 51feb7e2..3fe8c029 100644 --- a/templates/custom_leaflet_map.qmd +++ b/templates/custom_leaflet_map.qmd @@ -1,12 +1,16 @@ --- title: "Custom Leaflet Map" date: 2025-05-01 -categories: [Custom] +categories: [Custom, Live Demo] image: banners/custom_leaflet_map.png description: "A template of [custom leaflet map](/docs/custom-questions.html#leaflet-map-example) question using `sd_question_custom()`." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown3.shinyapps.io/custom_leaflet_map/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_custom_leaflet_map){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Custom questions: leaflet map](/docs/custom-questions.html#leaflet-map-example) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/custom_plotly_chart.qmd b/templates/custom_plotly_chart.qmd index 6cdbd066..0b97013e 100644 --- a/templates/custom_plotly_chart.qmd +++ b/templates/custom_plotly_chart.qmd @@ -1,12 +1,16 @@ --- title: "Custom Plotly Chart" date: 2025-05-02 -categories: [Custom] +categories: [Custom, Live Demo] image: banners/custom_plotly_chart.png description: "A template of [custom plotly chart](/docs/custom-questions.html#plotly-chart-example) question using `sd_question_custom()`." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown3.shinyapps.io/custom_plotly_chart/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_custom_plotly_chart){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Custom questions: plotly chart](/docs/custom-questions.html#plotly-chart-example) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/default.qmd b/templates/default.qmd index 9d89e049..8ad4ce33 100644 --- a/templates/default.qmd +++ b/templates/default.qmd @@ -6,7 +6,11 @@ image: banners/default.png description: "A minimum template for starting from scratch." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -14,18 +18,14 @@ surveydown::sd_create_survey( ) ``` -There is a `template = "default"` argument in the `sd_create_survey()` function, but it is set as default so no need to specify it. - -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} +`template = "default"` is the default argument, so you do not need to specify it. -[ Open in New Tab](https://surveydown.shinyapps.io/default/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_default){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/external_redirect.qmd b/templates/external_redirect.qmd index 778985ec..f5c259bc 100644 --- a/templates/external_redirect.qmd +++ b/templates/external_redirect.qmd @@ -6,7 +6,11 @@ image: banners/external_redirect.png description: "A reactive question template with [redirectional](/docs/external-redirect.html#reactive-redirect) links, accepting URL parameters." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown.shinyapps.io/external_redirect/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_external_redirect){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [External redirect](/docs/external-redirect.html#reactive-redirect) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/live_polling.qmd b/templates/live_polling.qmd index 5ecb75f5..d53d7c01 100644 --- a/templates/live_polling.qmd +++ b/templates/live_polling.qmd @@ -6,7 +6,11 @@ image: banners/live_polling.png description: "A [reactive](/docs/reactivity.html) question template of live-polling with responses shown as a bar chart." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,23 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ GitHub Repo](https://github.com/surveydown-dev/template_live_polling){.template-button .m-1 style="width: 200px;"} - -::: - -::: {.callout-note} - -1. The live-polling feature requires connection to database and cannot be demonstrated in the template preview. Therefore, a screenshot of bar chart resulted by live-polling is shown here instead. -2. To make this template work, you should firstly define your credentials by calling `sd_db_config()`, and then delete the `ignore = TRUE` argument in the `sd_db_connect()` function call. Once your survey is up and running, try to go through the survey several times. You'll see the bar chart updating in real-time as new responses are submitted. +## Video Walkthrough -::: + -
-a screenshot of bar chart resulted by live-polling -
+## Learn more -In the screenshot above, the survey page shows the choice of the current session, as well as a bar chart of all responses from the database. The bar chart updates in real-time as new responses are submitted. This feature is useful for live polling or feedback sessions where you want to see how opinions change over time. +- [Reactivity](/docs/reactivity.html) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/option_shuffling.qmd b/templates/option_shuffling.qmd index 02ae7d3f..f74b4c40 100644 --- a/templates/option_shuffling.qmd +++ b/templates/option_shuffling.qmd @@ -6,7 +6,11 @@ image: banners/option_shuffling.png description: "A template for creating questions with [shuffled options](/docs/survey-settings.html#shuffled-questions)." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown4.shinyapps.io/option_shuffling/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_option_shuffling){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Shuffled questions](/docs/survey-settings.html#shuffled-questions) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/question_types.qmd b/templates/question_types.qmd index 5543e7e6..d6e9083d 100644 --- a/templates/question_types.qmd +++ b/templates/question_types.qmd @@ -1,12 +1,16 @@ --- title: "Question Types" date: 2025-01-02 -categories: [Basic] +categories: [Basic, Live Demo] image: banners/question_types.png description: "A template showcasing all built-in [question types](/docs/question-types.html)." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown.shinyapps.io/question_types/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_question_types){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Question types](/docs/question-types.html) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/questions_yml.qmd b/templates/questions_yml.qmd index 309fcd02..841f7e8d 100644 --- a/templates/questions_yml.qmd +++ b/templates/questions_yml.qmd @@ -6,7 +6,11 @@ image: banners/questions_yml.png description: "A template showcasing all built-in [question types](/docs/question-types.html) using a YAML file." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown3.shinyapps.io/questions_yml/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_questions_yml){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Question types](/docs/question-types.html) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/random_options.qmd b/templates/random_options.qmd index b51288f4..02ee35f0 100644 --- a/templates/random_options.qmd +++ b/templates/random_options.qmd @@ -6,7 +6,11 @@ image: banners/random_options.png description: "A template for creating [randomized](/docs/randomization.html#live-randomization) survey options." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown2.shinyapps.io/random_options/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_random_options){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Live randomization](/docs/randomization.html#live-randomization) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/random_options_predefined.qmd b/templates/random_options_predefined.qmd index 628804b7..fe92f805 100644 --- a/templates/random_options_predefined.qmd +++ b/templates/random_options_predefined.qmd @@ -6,7 +6,11 @@ image: banners/random_options_predefined.png description: "A template for creating [predefined randomized](/docs/randomization.html#predefined-randomization) survey options." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown2.shinyapps.io/random_options_predefined/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_random_options_predefined){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Predefined randomization](/docs/randomization.html#predefined-randomization) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/reactive_drilldown.qmd b/templates/reactive_drilldown.qmd index 325cacb6..6f8e9441 100644 --- a/templates/reactive_drilldown.qmd +++ b/templates/reactive_drilldown.qmd @@ -1,12 +1,16 @@ --- title: "Reactive drilldown" date: 2025-03-02 -categories: [Reactivity] +categories: [Reactivity, Live Demo] image: banners/reactive_drilldown.png description: "A [reactive](/docs/reactivity.html) question template, with latter question options defined from former selection." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown2.shinyapps.io/reactive_drilldown/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_reactive_drilldown){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Reactivity](/docs/reactivity.html) +- [Start with a template](/docs/getting-started.html#start-with-a-template) diff --git a/templates/reactive_questions.qmd b/templates/reactive_questions.qmd index b3cd1346..e740a792 100644 --- a/templates/reactive_questions.qmd +++ b/templates/reactive_questions.qmd @@ -6,7 +6,11 @@ image: banners/reactive_questions.png description: "A template for creating [reactive](/docs/reactivity.html) survey questions." --- -To create this template, run this command in your R console: + + +## Create this template + +Run this command in your R console: ```{r} surveydown::sd_create_survey( @@ -15,16 +19,13 @@ surveydown::sd_create_survey( ) ``` -Refer to the [Start with a template](/docs/getting-started.html#start-with-a-template) section for more details. - -::: {.d-flex .justify-content-center .flex-wrap .text-center} - -[ Open in New Tab](https://surveydown2.shinyapps.io/reactive_questions/){.template-button .m-1 style="width: 200px;"} +## Video Walkthrough -[ GitHub Repo](https://github.com/surveydown-dev/template_reactive_questions){.template-button .m-1 style="width: 200px;"} + -::: +## Learn more -
- -
+- [Reactivity](/docs/reactivity.html) +- [Start with a template](/docs/getting-started.html#start-with-a-template)