> For the complete documentation index, see [llms.txt](https://docs.idew.org/code-trivia-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/code-trivia-app/code-template/template-build-tutorial/5.-core-js-functions.md).

# 5. Core JS Functions

### HTML to Load JavaScript Libraries

In the code below the script tags load [**libraries**](https://docs.idew.org/principles-and-practices/principles/programming-principles/libraries) that make coding your game much easier. **To all the people that work on free and open source projects, thank you!!** You are adding the [papaparse](https://www.papaparse.com/), [jquery](https://jquery.com/), [p5.js](https://p5js.org/), and the iDEW trivia libraries here.

**Add the code below to the bottom of your HTML body. (Place just before the tag for your custom JS code`<script src="script.js"></script>` if needed.**

{% code title="HTML" %}

```markup
<!-- JS Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js'></script>
<script src="https://cdn.jsdelivr.net/gh/idewcomputing/code-trivia/src/trivia.js"></script> <!-- iDEW trivia -->
```

{% endcode %}

### Core JavaScript Functions of Trivia Game

We are assuming you don't want your trivia game to be a static page and make people scroll down the screen just to see a trivia question. That's where JavaScript comes in to give you control of how the trivia game interacts and displays content when and where you want.

* **setup( )**\
  This function runs once when the visitor first comes to the page.  For example, we will load the question database here.
* **displayWelcome( ) , displayQuestion( ) ,  displayThankyou( )**\
  These functions control what is displayed for each of our screens.
* **onClickedAnswer( ) , onClickedStart( )**\
  These functions control what happens when buttons are clicked.

**Copy the JavaScript below and paste it in a new&#x20;*****script.js*****&#x20;file.** Nothing new will happen just yet. That's next.

{% code title="JavaScript (code.js)" %}

```javascript
//Runs once at the beginning
function setup() {
  //more code will go here... 
}

function displayWelcome() {
  //more code will go here...
}

function displayQuestion() {
  //more code will go here...
}

function displayThankyou() {
  //more code will go here...
}

function onClickedAnswer(isCorrect) {
  //more code will go here...
}

function onClickedStart() {
  //more code will go here...
}

```

{% endcode %}

&#x20;