De slimste Preparees ter wereld - Server
Server application made in typescript that accompanies dsptw-client.
Made by DrSkunk and Robbertc5.
Installation
This requires NodeJS to be installed.
Clone dsptw-server
into a directory and cd
into it. Then run the command npm install
to install all dependencies.
To start the application after setting the questions and the config file, run npm start
.
Client installation
Clone dsptw-client
into the same directory as where you cloned the server and cd
into it. Then run the command npm install
to install all dependencies.
Then build the client files with npm run build
.
Config file
config.json
{
"port": 8080,
"staticAssets": "your_static_folder",
"staticClient": "your_built_client_files",
"episode": 1,
"presenterName": "Erica",
"presenterCamera": "https://obs.ninja/?view=",
"grandFinaleMode": false
}
port
is the port where the websocket server will be listening as well as the webserver for serving the client and static files.
staticAssets
is where you set the location of the static files. This must be set to the directory containing your images and videos used in the different rounds. It must have the following directory structure. Sound files are optional.
Important: Videos must be .mp4
, images must be .png
and audio files must be .mp3
!
- static
- finale.json
- aflevering1
- questions.json
- collectiefgeheugen
- 1.mp4
- 2.mp4
- 3.mp4
- galerij
- 1
- 1.png
- 2.png
- 3.png
- 4.png
- 5.png
- 6.png
- 7.png
- 8.png
- 9.png
- 10.png
- 2
- 1.png
- 2.png
- ...
- 10.png
- 3
- 1.png
- 2.png
- ...
- 10.png
- 1
- opendeur
- 1.mp4
- 2.mp4
- 3.mp4
- sound
- answerCorrect.mp3
- answerTimeout.mp3 (currently not used yet)
- applause.mp3
- bumper.mp3
- itHasHappened.mp3
- stopClock.mp3
- thinkLoop.mp3
staticClient
is where you built the client files. if you checked out the repositories in the same directory this will be "../dsptw-client/build"
.
episode
is how you choose which episode from the static folder will be used. 1
will use aflevering1
for example.
presenterName
is what is shown in the interface under the camera view of the presenter.
presenterCamera
is an iframe which commonly uses obs.ninja so show a camera feed. It can also be an image link to show a still image.
grandFinaleMode
If true
, the finale round will be played with the two players with the highest score. If false
, the finale will be played with the two players with the lowest score.
Setting final questions
finale.json
in the static assets folder contains all the questions that will be used in the Finale
round. This is independent from episodes. In order to prevent the same questions from being asked, the questionIndex
is used. This sets the index for the first question that will be asked in the quiz.
This is an example containing two questions, starting with the first one.
{
"questionIndex": 0,
"questions": [
{
"question": "Count to five",
"answers": [
"One",
"Two",
"Three",
"Four",
"Five"
]
},
{
"question": "What are the first five letters of the alphabet?",
"answers": [
"A",
"B",
"C",
"D",
"E"
]
}
]
}
Setting the episode questions
static/aflevering1/questions.json
contain all the questions and answers that will be used, except for those in Finale
. The relevant videos and images are automatically loaded because they follow the same naming scheme in each episode.
The Puzzel
round grid is shuffled with a seed so that every time you restart the application with the same questions, it shows the same grid.
{
"drieZesNegen": [
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
},
{
"question": "",
"answer": ""
}
],
"openDeur": [
{
"question": "",
"answers": [
"",
"",
"",
""
]
},
{
"question": "",
"answers": [
"",
"",
"",
""
]
},
{
"question": "",
"answers": [
"",
"",
"",
""
]
}
],
"puzzel": [
[
{
"answer": "",
"words": [
"",
"",
"",
""
]
},
{
"answer": "",
"words": [
"",
"",
"",
""
]
},
{
"answer": "",
"words": [
"",
"",
"",
""
]
}
],
[
{
"answer": "",
"words": [
"",
"",
"",
""
]
},
{
"answer": "",
"words": [
"",
"",
"",
""
]
},
{
"answer": "",
"words": [
"",
"",
"",
""
]
}
],
[
{
"answer": "",
"words": [
"",
"",
"",
""
]
},
{
"answer": "",
"words": [
"",
"",
"",
""
]
},
{
"answer": "",
"words": [
"",
"",
"",
""
]
}
]
],
"galerij": [
[
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
[
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
],
[
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
]
],
"collectiefGeheugen": [
[
"",
"",
"",
"",
""
],
[
"",
"",
"",
"",
""
],
[
"",
"",
"",
"",
""
]
]
}