Add variable labels using the summarytools freq package

This adds a "Variable" label about the field names and removes the double hashtags. I also adjusted the standard max-width of 940 px to 1000px -- however, if the actual long name is a lot longer than your example data, this won't be much help. I've provided comments (// precedes inline comments in JS) so that you can see what each area of the Javascript is doing. You don't have to do anything special for the Javascript to work (it's built-in in R Markdown).

Using your code as it already is, add the following in as a chunk after your code.

If you try to run this chunk inline, it won't produce output. However, you'll see the output when you render.

For the questions added to the question labels, I've edited this to provide two different ways to do this. One uses R. The other uses JS.

I would suggest using R, because it's native. But you may have your own reasons for not doing so. This violates good naming practices, but it could be used for just these tables (if you wanted).

The R version is OPTION 1. This code goes between your data collection and storing the variable names in vct. (I added vct to this code, actually.)

```{r optQuestions, include = F,eval=F}
# not sure how you have the questions stored
# let's say you have the questions stored in a vector
questions = c("How often do you exercies?", "Do you like apples?")
qLabs = names(data_in_na)

names(data_in_na) <- paste(qLabs, questions)

vct <- data_in_na %>% names(.)
```

Now for the JS - 2 lines equate to doing what paste is doing in the R chunk. Using one or the other, you won't see a difference with this data specifically. Although, if there are a lot of questions, you may find the R method preferable.

```{r styler,results='asis',engine='js'}

// search for class and tags
elem = document.querySelector('div.hereForMod > pre > code');
// remove hashtags
elem.innerHTML = elem.innerHTML.replace(/#{2}/g, '');

// I missed what you wanted for the questions -- 
// this is option TWO: // add // if you want to ignore them (or delete)
elem.innerHTML = elem.innerHTML.replace(/q1/g, 'q1 How often do you exercise?')
elem.innerHTML = elem.innerHTML.replace(/q2/g, 'q2 Do you like apples?')

// change max width
newMax = "max-width:1000px;";  //currently 940
elem2 = document.querySelector('.main-container'); // find what to change
styler = elem2.getAttribute("style");          // get current inline styles
if(styler==undefined || styler==null){ 
  styler="";
}
elem2.setAttribute("style", styler+newMax);    // set new style settings 

```

If you add eval=FALSE to the chunk, you can see what it changes when you don't use it.

If you want a word other than Variables, you have to adjust that value next to Freq. (Currently, that value is 12.) You'll also want to make sure that you maintain the same number of spaces between that word and Freq.

Let me know if you have any questions.

Before edit:

After edit: