ottrproject · padmashris · Apr 1, 2026 · Jan 5, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/_quarto.yml b/_quarto.yml
@@ -13,42 +13,46 @@ website:
         menu:
           - text: "Getting Started"
             href: getting_started.qmd
-          - text: "Courses"
-            href: getting_started.qmd#courses
-          - text: "Websites"
-            href: getting_started.qmd#websites
-          - text: "Dashboards"
-            href: getting_started.qmd#dashboards
-          - text: "Next Steps"
+          - text: "Next steps"
             href: next_steps.qmd
-          - text: "Enroll for Sync Updates"
-            href: enroll_sync.qmd
-      - text: "Customization"
+          - text: "Example use cases"
+            href: examples.qmd
+      - text: "Build with OTTR"
         menu:
-          - text: "Customizing checks {{< fa robot title='A robot' >}}"
-            href: customize-robots.qmd
-          - text: "Customizing style {{< fa palette title='A palette' >}}"
+          - text: "Template"
+            href: getting_started.qmd
+          - text: "Enroll for sync updates"
+            href: enroll_sync.qmd
+          - text: "OTTR-fy existing repo"
+            href: ottr-fy.qmd
+          - text: "---"
+          - text: "Customize"
+          - text: "Style {{< fa palette title='A palette' >}}"
             href: customize-style.qmd
-          - text: "Customizing Docker {{< fa gears title='gears' >}}"
+          - text: "Checks {{< fa robot title='A robot' >}}"
+            href: customize-robots.qmd
+          - text: "Docker {{< fa gears title='gears' >}}"
             href: customize-docker.qmd
+      - text: "Advanced Integrations"
+        menu:
+          - text: "Google Analytics {{< fa chart-line title='a line chart' >}}"
+            href: more_features_ganalytic.qmd
           - text: "Citing sources {{< fa quote-left title='A left quotation mark' >}}"
             href: more_features_sources.qmd
           - text: "Giving credits {{< fa award title='An award' >}}"
             href: more_features_credits.qmd
-          - text: "Google Analytics {{< fa chart-line title='a line chart' >}}"
-            href: more_features_ganalytic.qmd
+          - text: "Google Docs {{< fa file title='a file folder' >}}"
+            href: more_features_gdoc.qmd
           - text: "Borrowing chapters {{< fa bookmark title='A bookmark' >}}"
             href: more_features_borrowing.qmd
-          - text: "Compatibility with Google Docs {{< fa file title='a file folder' >}}"
-            href: more_features_gdoc.qmd
-          - text: "OTTR-fying an existing repository"
-            href: ottr-fy.qmd
-          - text: "About OTTR babies"
-            href: examples.qmd
-      - text: "Troubleshooting {{< fa tools title='tools' >}}"
-        href: faqs.qmd
-      - text: "Contact {{< fa envelope title='An envelope' >}}"
-        href: contact.qmd
+      - text: "Help me choose my template"
+        href: choose_template.qmd
+      - text: "Help"
+        menu:
+          - text: "Troubleshooting {{< fa tools title='tools' >}}"
+            href: faqs.qmd
+          - text: "Contact {{< fa envelope title='An envelope' >}}"
+            href: contact.qmd
       - text: "{{< fa brands github title='The GitHub logo' >}}"
         href: https://github.com/ottrproject/OTTR_Template
 

diff --git a/choose_template.qmd b/choose_template.qmd
@@ -0,0 +1,282 @@
+---
+title: "Help me choose my template"
+---
+
+Not sure which OTTR template is right for you? Answer two quick questions and we'll point you to the right setup guide.
+
+<style>
+  #ottr-wizard {
+    font-family: inherit;
+    width: 100%;
+    margin: 1.5rem auto;
+    text-align: center;
+  }
+  #wizard-breadcrumb {
+    font-size: 1rem;
+    color: #666;
+    margin-bottom: 1rem;
+    min-height: 1.4rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  .crumb-question { color: #888; }
+  .crumb-answer   { color: #5aA8C0; font-weight: 600; }
+  .crumb-sep      { color: #bbb; margin: 0 2px; }
+  .wizard-question {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #222;
+    margin-bottom: 1rem;
+  }
+  .wizard-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+  }
+  .wizard-btn {
+    background-color: #ADD8E6;
+    color: #222;
+    border: none;
+    border-radius: 6px;
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+  .wizard-btn:hover { background-color: #85C1D4; }
+  .result-card {
+    border-radius: 8px;
+    padding: 1.2rem 1.4rem;
+    margin-top: 0.5rem;
+  }
+  .result-recommended {
+    background-color: #e8f6fa;
+    border-left: 4px solid #ADD8E6;
+  }
+  .result-standard {
+    background-color: #f4f4f4;
+    border-left: 4px solid #aaa;
+  }
+  .result-name {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #222;
+    margin-bottom: 0.3rem;
+  }
+  .badge-recommended {
+    background-color: #ADD8E6;
+    color: #222;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 20px;
+    margin-left: 8px;
+    vertical-align: middle;
+  }
+  .result-desc {
+    font-size: 0.92rem;
+    color: #444;
+    margin: 0.5rem 0 1rem;
+  }
+  .result-link {
+    display: inline-block;
+    background-color: #ADD8E6;
+    color: #222 !important;
+    text-decoration: none;
+    padding: 8px 18px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    transition: background-color 0.15s ease;
+  }
+  .result-link:hover { background-color: #85C1D4; }
+  .restart-btn {
+    background: none;
+    border: none;
+    color: #5aA8C0;
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 10px;
+    text-decoration: underline;
+  }
+  .restart-btn:hover { color: #85C1D4; }
+</style>
+
+<div id="ottr-wizard">
+  <div id="wizard-breadcrumb"></div>
+  <div id="wizard-content"></div>
+</div>
+
+<script>
+(function () {
+  const tree = {
+    question: "What do you want to create?",
+    options: [
+      {
+        label: "Website",
+        next: {
+          question: "Do you have existing R Markdown / Bookdown files?",
+          options: [
+            { label: "Yes", result: "rmarkdown_web" },
+            { label: "No I'm starting fresh", result: "quarto_web" }
+          ]
+        }
+      },
+      {
+        label: "Online Course",
+        next: {
+          question: "Do you have existing R Markdown files?",
+          options: [
+            { label: "Yes", result: "rmarkdown_courses" },
+            { label: "No I'm starting fresh", result: "quarto_courses" }
+          ]
+        }
+      },
+      {
+        label: "Metrics Dashboard",
+        result: "dashboards"
+      }
+    ]
+  };
+
+  const results = {
+    rmarkdown_web: {
+      name: "R Markdown Websites",
+      description: "An R Markdown / Bookdown-based website template. Best choice when you have existing .Rmd files to build on.",
+      url: "getting_started.html#r-markdown-websites",
+      recommended: false
+    },
+    quarto_web: {
+      name: "Quarto Websites",
+      description: "A Quarto-based website template. The modern standard, recommended for all new projects.",
+      url: "getting_started.html#quarto-websites",
+      recommended: true,
+      fallback: "rmarkdown_web"
+    },
+    rmarkdown_courses: {
+      name: "R Markdown Courses",
+      description: "An R Markdown / Bookdown-based course template. Best choice when you have existing .Rmd files to build on.",
+      url: "getting_started.html#r-markdown-courses",
+      recommended: false
+    },
+    quarto_courses: {
+      name: "Quarto Courses",
+      description: "A Quarto-based course template. Recommended for new projects.",
+      url: "getting_started.html#quarto-courses",
+      recommended: true,
+      fallback: "rmarkdown_courses"
+    },
+    dashboards: {
+      name: "Dashboards",
+      description: "Collect and display metrics from GitHub, Google Analytics, Google Forms, CRAN, Calendly, and more.",
+      url: "getting_started.html#dashboards",
+      recommended: false
+    }
+  };
+
+  let history = [];
+  let current = tree;
+
+  function render() {
+    const breadcrumb = document.getElementById("wizard-breadcrumb");
+    const content    = document.getElementById("wizard-content");
+
+    if (history.length > 0) {
+      breadcrumb.innerHTML =
+        history.map(h =>
+          `<span class="crumb-question">${h.question}</span>` +
+          `<span class="crumb-sep"> › </span>` +
+          `<span class="crumb-answer">${h.label}</span>`
+        ).join('<span class="crumb-sep"> &nbsp;·&nbsp; </span>') +
+        `<button class="restart-btn" onclick="ottrRestart()">↺ Start over</button>`;
+    } else {
+      breadcrumb.innerHTML = "";
+    }
+
+    if (current.result) {
+      const r = results[current.result];
+      const badge = r.recommended
+        ? `<span class="badge-recommended">⭐ Recommended</span>`
+        : "";
+      const fallbackBtn = r.fallback
+        ? `<div style="margin-top:1rem">
+             <button class="restart-btn" onclick="ottrUseFallback('${r.fallback}')">
+               I want to use R Markdown instead
+             </button>
+           </div>`
+        : "";
+      content.innerHTML = `
+        <div class="result-card ${r.recommended ? "result-recommended" : "result-standard"}">
+          <div class="result-name">${r.name}${badge}</div>
+          <p class="result-desc">${r.description}</p>
+          <a href="${r.url}" class="result-link">Get started with ${r.name} →</a>
+          ${fallbackBtn}
+        </div>`;
+    } else {
+      const btns = current.options.map((opt, i) =>
+        `<button class="wizard-btn" onclick="ottrChoose(${i})">${opt.label}</button>`
+      ).join("");
+      content.innerHTML = `
+        <div class="wizard-question">${current.question}</div>
+        <div class="wizard-options">${btns}</div>`;
+    }
+  }
+
+  window.ottrChoose = function (i) {
+    const opt = current.options[i];
+    history.push({ question: current.question, label: opt.label });
+    current = opt.result ? { result: opt.result } : opt.next;
+    render();
+  };
+
+  window.ottrUseFallback = function (resultKey) {
+    current = { result: resultKey };
+    render();
+  };
+
+  window.ottrRestart = function () {
+    history = [];
+    current = tree;
+    render();
+  };
+
+  render();
+})();
+</script>
+
+---
+
+## At a glance
+
+| Template | Best for | Write in | Can also publish to |
+|:---|:---|:---:|:---|
+| [Quarto Courses](getting_started.html#quarto-courses) ⭐ | New courses, starting fresh , existing `.qmd` course files | `.qmd` | GitHub Pages · Coursera · Leanpub |
+| [R Markdown Courses](getting_started.html#r-markdown-courses) | Existing `.Rmd` course files | `.Rmd` | GitHub Pages · Coursera · Leanpub |
+| [Quarto Websites](getting_started.html#quarto-websites) ⭐ | New websites, starting fresh , existing `.qmd` course files| `.qmd` | GitHub Pages |
+| [R Markdown Websites](getting_started.html#r-markdown-websites) | Existing `.Rmd` website files | `.Rmd` | GitHub Pages |
+| [Dashboards](getting_started.html#dashboards) | Metrics tracking & reporting | `.Rmd` | GitHub Pages |
+
+## Key questions to ask yourself
+
+**Courses vs. Websites**
+
+- Choose a **Course** template if you want a sidebar table of contents, chapter-by-chapter navigation, and the option to publish to Coursera or Leanpub.
+- Choose a **Website** template if you want a top navigation bar and a more flexible page structure — like this documentation site.
+
+**Quarto vs. R Markdown**
+
+- Choose **Quarto** if you are starting a new project. It is the modern successor to R Markdown, supports R and Python, and is what OTTR recommends for all new content.
+- Choose **R Markdown** if you already have a set of `.Rmd` files you want to build on, or if your team is already working in R Markdown and a migration isn't practical right now.
+
+**Dashboards**
+
+- Choose the **Dashboard** template if your primary goal is to collect and display metrics — number of GitHub stars, Google Analytics traffic, CRAN downloads, Calendly bookings, and more — powered by the [`metricminer`](https://www.metricminer.org/) R package.
+
+---
+
+[Get Started](getting_started.qmd) →
diff --git a/contact.qmd b/contact.qmd
@@ -7,3 +7,7 @@ output:
 If you have questions please contact:
 
 -   Carrie Wright (cwright2@fredhutch.org)
+
+---
+
+← [Troubleshooting](faqs.qmd) &emsp; [Home](index.qmd)
diff --git a/customize-docker.qmd b/customize-docker.qmd
@@ -220,3 +220,7 @@ If you do choose to use the action manually, then you can use this by going to `
 ![](resources/images/docker-gha.png)
 
 For more guidance on how to personalize Docker images, we taking our [Containers for Scientist course](https://hutchdatascience.org/Containers_for_Scientists/). Or file a GitHub issue on the relevant repository.
+
+---
+
+← [Customizing Checks](customize-robots.qmd) &emsp; [Next Steps](next_steps.qmd) →
diff --git a/customize-robots.qmd b/customize-robots.qmd
@@ -216,3 +216,7 @@ To investigate why a GitHub action has failed, go to `Actions` and click on the
 See our [FAQ's section](./faqs.html) for the most commonly encountered errors and how to address them.
 
 If you are unsure what the error message means and have trouble addressing it, please [file an issue on the OTTR_Template repository to get help](https://github.com/ottrproject/OTTR_Template/issues/new?assignees=cansavvy&labels=bug&template=course-template-problem-report.md).
+
+---
+
+← [Customizing Style](customize-style.qmd) &emsp; [Customizing Docker](customize-docker.qmd) →
diff --git a/customize-style.qmd b/customize-style.qmd
@@ -103,3 +103,7 @@ If you would like to change the current light blue color to be a different color
 If you would like to change the image at the top of the Bookdown version of the course, you need to do the following steps:
 * Add a new image file to the `assets` directory
 * Modify the `assets/big-image.html` file on line 11. Change out `src = "assets/dasl_thin_main_image.png"` so that `dasl_thin_main_image.png` is replaced with the name of your image file.
+
+---
+
+← [Next Steps](next_steps.qmd) &emsp; [Customizing Checks](customize-robots.qmd) →