datacamp / datacamp/datacamp-light

Including datacamp light in a Shiny app

Open
#115 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.4k
Forks
366
Avg merge
2h 17m
Merged PRs (30d)
2

Description

Based on this question I see that it is possible to include datacamp widgets into shiny. At least the widgets show up, but there seems to be an issue with the session or the connection between shiny and datacamp as the Run/Submit buttons wont activate. I tried to include those versions without success:

Am I missing something or is it not that easy to include a widget to shiny?

Thats the R/shiny code:

library(shiny)
library(shinydashboard)

ui <- shinyUI(
  dashboardPage(
    header = dashboardHeader(title = 'R Code'),
    sidebar = dashboardSidebar(menu),
    body = dashboardBody(
      tags$head(tags$script(src = 'https://cdn.datacamp.com/dcl-react.js.gz')),
      # tags$head(tags$script(src = 'https://cdn.datacamp.com/datacamp-light-latest.min.js')),
      # tags$head(HTML('<script async src="https://cdn.datacamp.com/dcl-react-dev.js.gz"></script>')),
      tags$head(tags$script('$( document ).ready(function() {
                                    initAddedDCLightExercises();
                                  });')),
      HTML('
          <div class="exercise">
    <div class="title">
           <h2>How it works</h2>
           </div>
           <div data-datacamp-exercise data-lang="r" data-height="500">
           <code data-type="pre-exercise-code"># no pec</code>
           <code data-type="sample-code">
           # Calculate 3 + 4
           3 + 4
           
           # Calculate 6 + 12
           </code>
           <code data-type="solution">
           # Calculate 3 + 4
           3 + 4
           
           # Calculate 6 + 12
           6 + 12</code>
           <code data-type="sct">
           test_output_contains(&quot;18&quot;, incorrect_msg = &quot;Make sure to add `6 + 12`
           on
           a new line. Do not start the line with a `#`, otherwise your R code is not executed!&quot;)
           success_msg(&quot;Awesome! See how the console shows the result of the R code you
           submitted? Now that you&#39;re familiar with the interface, let&#39;s get down to R
           business!&quot;)
           </code>
           <div data-type="hint">
           <p>Just add a line of R code that calculates the sum of 6 and 12, just like the
           example
           in the sample code!</p>
           </div>
           </div>
           </div>'
      )
    )
  )
)

server <- function(input, output) {}
shinyApp(ui, server)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue provides an R/Shiny app, HTML exercise markup, and three CDN script entry points; start by reproducing the disabled Run/Submit buttons with that example. Investigate the interaction between the embedded widget and the Shiny session, then document a confirmed supported setup or the missing integration requirement.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, r
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.