Integration between Shiny App and Datacamp Light - Free Code

Question

I'm trying to integrate the self-code app from Datacamp to my Shiny App, this code is a simple example of what I'm trying to do.

I tried to use the HTML function and put:

tags$script(HTML("type = 'text/javascript' src = 'https://cdn.datacamp.com/datacamp-light-latest.min.js'")

But, I'm just getting an empty box in my webpage.

ui.R

library(shiny)
library(shinydashboard)

menu <- sidebarMenu(
  menuItem('Index', tabName = 'index')
)

integration <- tabItem(tabName = 'index',
                       fluidRow(
                         box(
                           withd = 12,
                           title = 'Code',
                           tags$script(type = 'text/javascript', src = 'https://cdn.datacamp.com/datacamp-light-latest.min.js')
                         )
                         )
                       )

shinyUI(
  dashboardPage(
    header = dashboardHeader(title = 'R Code'),
    sidebar = dashboardSidebar(menu),
    body = dashboardBody(
      tabItems(
        integration
        )
      )
    )
  )

server.R

library(shiny)

shinyServer(function(input, output) {

})

Answer 1

On the DataCamp Light Github they are showing another ressource to include:

<script type="text/javascript" src="//cdn.datacamp.com/dcl-react.js.gz"></script>

And by copying the HTML code into a R shiny app, I am getting the widget now, but there is still some session issue, as submitting a result is not possible. But Hints/Solutions are.

The browser console complains about:

Source-Map-Fehler: Error: sourceMapURL could not be parsed

I also tried including the initAddedDCLightExercises() based on the github description, but that didnt change the session problem.

tags$head(tags$script('$( document ).ready(function() {
                              initAddedDCLightExercises();
                            });')),

App---

library(shiny)
library(shinydashboard)

ui <- shinyUI(
  dashboardPage(
    header = dashboardHeader(title = 'R Code'),
    sidebar = dashboardSidebar(menu),
    body = dashboardBody(
      tags$head(tags$script(type = 'text/javascript', src = '//cdn.datacamp.com/dcl-react.js.gz')),
      HTML('
        <div data-datacamp-exercise data-lang="r">
          <code data-type="pre-exercise-code">
          # This will get executed each time the exercise gets initialized
          b = 6
        </code>
          <code data-type="sample-code">
          # Create a variable a, equal to 5


          # Print out a


          </code>
          <code data-type="solution">
          # Create a variable a, equal to 5
          a <- 5

        # Print out a
        print(a)
        </code>
          <code data-type="sct">
          test_object("a")
        test_function("print")
        success_msg("Great job!")
        </code>
          <div data-type="hint">Use the assignment operator (<code><-</code>) to create the variable <code>a</code>.</div>
          </div>'
      )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)