Develop Reference

Cannot get program to run. (Javascript, HTML, CSS)

I am trying to write a simple text based rpg for my little nephew. I followed along with a youtube tutorial and for some reason I cannot understand, the program won't run. I've gone over the code in all three files several times for typo's and anything obscure that shouldn't be there. However, I am stumped. Any help would be appreciated.
const textElement = document.getElementById("text")
const optionButtonsElement = document.getElementById("option-buttons")
let state = {}
function startGame(){
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex){
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstChild){
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}
textNode.options.forEach(option => {
if(showOption(option)){
const button = document.createElement("button")
button.innerText = option.text
button.classList.add("btn")
button.addEventListener("click", () => selectOption(option))
optionButtonsElement.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
function selectOption(option) {
const nextTextNodeId = option.nextText
state = object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: "You wake up in a strange place and you see a jar of blue goo near you.",
options: [
{
text: "Take goo",
setState: {bluegoo: true},
nextText: 2
},
{
text: "Leave the goo",
nextText: 2
}
]
},
{
id: 2,
text: "You venture forth in search of answers to where you are when you come across a merchant.",
options:[
{
text: "Trade the goo for a sword.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, sword: true },
nextText: 3
},
{
text: "Trade the goo for a shield.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, shield: true },
nextText: 3
},
{
text: "Ignore the merchant.",
nextText: 3
},
]
},
{
id: 3,
text: "After leaving the merchant you start to feel tired ans tumble upon a small town next to a dangerous looking castle.",
options: [
{
text: "Explore the castle.",
nextText: 4
},
{
text: "Find a room to sleep at in the towwn.",
nextText: 5
},
{
text: "Find some hay in a stable to sleep in.",
nextText: 6
}
]
},
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options [
{
text: "Restart",
nextText: -1
}
]
},
{
id: 5,
text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 6,
text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
options: [
{
text: 'Explore the castle',
nextText: 7
}
]
},
{
id: 7,
text: 'While exploring the castle you come across a horrible monster in your path.',
options: [
{
text: 'Try to run',
nextText: 8
},
{
text: 'Attack it with your sword',
requiredState: (currentState) => currentState.sword,
nextText: 9
},
{
text: 'Hide behind your shield',
requiredState: (currentState) => currentState.shield,
nextText: 10
},
{
text: 'Throw the blue goo at it',
requiredState: (currentState) => currentState.blueGoo,
nextText: 11
}
]
},
{
id: 8,
text: 'Your attempts to run are in vain and the monster easily catches.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 9,
text: 'You foolishly thought this monster could be slain with a single sword.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 10,
text: 'The monster laughed as you hid behind your shield and ate you.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 11,
text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
options: [
{
text: 'Congratulations. Play Again.',
nextText: -1
}
]
}
]
startGame()
*, *::before, *::after{
box-sizing: border-box;
font-family: Gotham Rounded;
}
body{
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #333;
}
.container{
width: 800px;
max-width: 80%;
background-color: white;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 10px 2px;
}
.btn-grid{
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin-top: 20px;
}
.btn{
background-color: hsl(200, 100%, 50%);
border: 1px solid hsl(200, 100%, 30%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover{
border-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sawyer's Dungeons and Dragons Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="game.js"></script>
</head>
<body>
<div class="container">
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>
</html>
I appreciate anyone taking a look at this.
Cheers!

There are few mistakes in your code
1st:
You are missing : here
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
// : is missing after options
options [
{
text: "Restart",
nextText: -1
}
]
},
2nd:
It should be Object.assign and NOT
state = object.assign(state, option.setState)
function selectOption(option) {
const nextTextNodeId = option.nextText
// It should be Object.assign
state = object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
You should add defer attribute while linking js file in html file in this case
<script defer src="game.js"></script>
This should fix the problem
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sawyer's Dungeons and Dragons Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
// need to add defer attribute
<script defer src="game.js"></script>
</head>
<body>
<div class="container">
<div id="text">Text</div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
<button class="btn">Option 4</button>
</div>
</div>
</body>
</html>
JS File
const textElement = document.getElementById("text")
const optionButtonsElement = document.getElementById("option-buttons")
let state = {}
function startGame(){
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex){
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionButtonsElement.firstChild){
optionButtonsElement.removeChild(optionButtonsElement.firstChild)
}
textNode.options.forEach(option => {
if(showOption(option)){
const button = document.createElement("button")
button.innerText = option.text
button.classList.add("btn")
button.addEventListener("click", () => selectOption(option))
optionButtonsElement.appendChild(button)
}
})
}
function showOption(option) {
return option.requiredState == null || option.requiredState(state)
}
function selectOption(option) {
const nextTextNodeId = option.nextText
state = Object.assign(state, option.setState)
if (nextTextNodeId <= 0){
return startGame()
}
state = Object.assign(state, option.State)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: "You wake up in a strange place and you see a jar of blue goo near you.",
options: [
{
text: "Take goo",
setState: {bluegoo: true},
nextText: 2
},
{
text: "Leave the goo",
nextText: 2
}
]
},
{
id: 2,
text: "You venture forth in search of answers to where you are when you come across a merchant.",
options:[
{
text: "Trade the goo for a sword.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, sword: true },
nextText: 3
},
{
text: "Trade the goo for a shield.",
requiredState: (currentState) => currentState.bluegoo,
setState: {bluegoo: false, shield: true },
nextText: 3
},
{
text: "Ignore the merchant.",
nextText: 3
},
]
},
{
id: 3,
text: "After leaving the merchant you start to feel tired ans tumble upon a small town next to a dangerous looking castle.",
options: [
{
text: "Explore the castle.",
nextText: 4
},
{
text: "Find a room to sleep at in the towwn.",
nextText: 5
},
{
text: "Find some hay in a stable to sleep in.",
nextText: 6
}
]
},
{
id: 4,
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options: [
{
text: "Restart",
nextText: -1
}
]
},
{
id: 5,
text: 'Without any money to buy a room you break into the nearest inn and fall asleep. After a few hours of sleep the owner of the inn finds you and has the town guard lock you in a cell.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 6,
text: 'You wake up well rested and full of energy ready to explore the nearby castle.',
options: [
{
text: 'Explore the castle',
nextText: 7
}
]
},
{
id: 7,
text: 'While exploring the castle you come across a horrible monster in your path.',
options: [
{
text: 'Try to run',
nextText: 8
},
{
text: 'Attack it with your sword',
requiredState: (currentState) => currentState.sword,
nextText: 9
},
{
text: 'Hide behind your shield',
requiredState: (currentState) => currentState.shield,
nextText: 10
},
{
text: 'Throw the blue goo at it',
requiredState: (currentState) => currentState.blueGoo,
nextText: 11
}
]
},
{
id: 8,
text: 'Your attempts to run are in vain and the monster easily catches.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 9,
text: 'You foolishly thought this monster could be slain with a single sword.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 10,
text: 'The monster laughed as you hid behind your shield and ate you.',
options: [
{
text: 'Restart',
nextText: -1
}
]
},
{
id: 11,
text: 'You threw your jar of goo at the monster and it exploded. After the dust settled you saw the monster was destroyed. Seeing your victory you decide to claim this castle as your and live out the rest of your days there.',
options: [
{
text: 'Congratulations. Play Again.',
nextText: -1
}
]
}
]
startGame()

Have you opened your browser's console to check for errors?
text: "You are so tired that you fall asleep while exploring the castle and are killed by some terrible monster in your sleep.",
options [
You are missing a ":" here:
options: [
As for this:
state = object.assign(state, option.setState)
What is object?

How do I adapt a javascript to use a database input?

I am a novice Java/CSS/HTML user with a background using SQL. For a personal website project, I want to connect a webpage i am building to a database list of questions. Currently, the questions I am using are just written in the javacode like such:
const questions = [{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false },
{ text: '2.2', correct: false },
{ text: '57', correct: false }
]
},
{
question: 'What is the captial of Russia?',
answers: [
{ text: 'Helsinki', correct: false },
{ text: 'St Petersburg', correct: false },
{ text: 'Moscow', correct: true },
{ text: 'Sainsburys', correct: false }
]
},
{
question: 'How many sides does a nonagon have',
answers: [
{ text: 'As many as it wants', correct: false },
{ text: 'Nine', correct: true },
{ text: 'Seven', correct: false },
{ text: 'Twelve', correct: false }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true },
{ text: '10', correct: false },
{ text: '12', correct: false }
]
}
]
Instead of using this hideous list, I would like to use a connection to information I have in a amazon-DynamoDB database which has 50 or so questions listed.
My question is:
What would replace the code above to create a connection to the database and to use the new data the same way?
I can reformat the sql database data to have columns: Question, Answer, Correct? in preperation
Any help would be fantastic, I've gone a bit off grid from the training material I was using!
removed question about looking for a database recommendation

JavaScript sort is not working as expected while sorting numbers inside array of objects [duplicate]

This question already has answers here:
How to sort an array of integers correctly
(32 answers)
Javascript sort an array of objects based on numeric key
(4 answers)
Sorting in JavaScript: Shouldn't returning a boolean be enough for a comparison function?
(2 answers)
Closed 4 years ago.
I am trying to sort an array of objects by attribute inside object and js is not sorting it well. This is the code that I used and the array that I am trying to sort:
const json = [
{ code: '40828',
distance: { text: '2.3 km', value: 2309 },
duration: { text: '14 mins', value: 831 },
},
{ code: '43343',
distance: { text: '35.4 km', value: 35432 },
duration: { text: '1 hour 27 mins', value: 5242 },
},
{ code: '40539',
distance: { text: '26.1 km', value: 26134 },
duration: { text: '1 hour 38 mins', value: 5885 },
},
{ code: '4840',
distance: { text: '2.3 km', value: 2340 },
duration: { text: '17 mins', value: 1044 },
},
{ code: '32725',
distance: { text: '6.2 km', value: 6218 },
duration: { text: '34 mins', value: 2011 },
},
{ code: '39608',
distance: { text: '3.6 km', value: 3620 },
duration: { text: '22 mins', value: 1299 },
},
{ code: '50913',
distance: { text: '4.7 km', value: 4707 },
duration: { text: '35 mins', value: 2112 },
},
{ code: '43879',
distance: { text: '10.1 km', value: 10065 },
duration: { text: '49 mins', value: 2938 },
},
{ code: '35606',
distance: { text: '3.0 km', value: 2965 },
duration: { text: '19 mins', value: 1168 },
},
{ code: '4377',
distance: { text: '4.5 km', value: 4524 },
duration: { text: '24 mins', value: 1439 },
},
{ code: '41519',
distance: { text: '23.9 km', value: 23940 },
duration: { text: '1 hour 5 mins', value: 3872 },
}
]
console.log(json.sort((a, b) => a.duration.value > b.duration.value));
I am trying to sort it by distance.value and I am getting this result:
[ { code: '39608',
distance: { text: '3.6 km', value: 3620 },
duration: { text: '22 mins', value: 1299 } },
{ code: '40828',
distance: { text: '2.3 km', value: 2309 },
duration: { text: '14 mins', value: 831 } },
{ code: '4840',
distance: { text: '2.3 km', value: 2340 },
duration: { text: '17 mins', value: 1044 } },
{ code: '35606',
distance: { text: '3.0 km', value: 2965 },
duration: { text: '19 mins', value: 1168 } },
{ code: '4377',
distance: { text: '4.5 km', value: 4524 },
duration: { text: '24 mins', value: 1439 } },
{ code: '32725',
distance: { text: '6.2 km', value: 6218 },
duration: { text: '34 mins', value: 2011 } },
{ code: '50913',
distance: { text: '4.7 km', value: 4707 },
duration: { text: '35 mins', value: 2112 } },
{ code: '43879',
distance: { text: '10.1 km', value: 10065 },
duration: { text: '49 mins', value: 2938 } },
{ code: '41519',
distance: { text: '23.9 km', value: 23940 },
duration: { text: '1 hour 5 mins', value: 3872 } },
{ code: '43343',
distance: { text: '35.4 km', value: 35432 },
duration: { text: '1 hour 27 mins', value: 5242 } },
{ code: '40539',
distance: { text: '26.1 km', value: 26134 },
duration: { text: '1 hour 38 mins', value: 5885 } } ]
So everything in the result array looks good (and sorted well) except the first element, and I am trying to understand why? Value 831 should be first in an array but for some reason is second and first is 1299. Can anyone explain that maybe I am doing something wrong?
Thanks in advance 🍻

You're close, but your sort is slightly off. The sort doesn't look for a boolean return type, it looks for integers. So you need to rework it like this: json.sort((a,b) => a.distance.value - b.distance.value);

JS Sorts data based on ASCII. Please find below updated code.
console.log(json.sort((a, b) => a.duration.value - b.duration.value))

Iview UI Table Cell

How can I access the cell data in a library iview table for Vuejs when I click on it? I need the cell table value and column title after that change the cell table css. For example, if I click in a cell and it turn red, in a other cell, it turn green

<template>
<Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
export default {
data () {
return {
columns7: [
{
title: 'Age',
key: 'age'
},
/* blah blah blah...*/
{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {//here you can pass event handlers
click: () => {
this.show(params.index)
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, 'Delete')
]);
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park'
}
]
}
},
methods: {
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name：${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
}
</script>
You can provide render function in columns definition. (And in render function you can "bind" event receivers).
jsfiddle,iview doc,Vue - render functions

How do I attach a click event handler to null data points on HighMaps

I have already tried changing the data (null to some out of range number) and toying with colorAxis min and mas and color stops and while that works if it where a single map, it does not work for what I am doing.
I really need to be able to hang code on a click event.
Thanks
https://jsfiddle.net/alex_at_pew/nbz9npyg/5/
$(function () {
// Instantiate the map
$('#container').highcharts('Map', {
plotOptions: {
map: {
events: {
mouseOver: function (e) {
console.log(e);
}
}
}
},
chart : {
borderWidth : 1
},
title : {
text : 'Nordic countries'
},
subtitle : {
text : 'Demo of drawing all areas in the map, only highlighting partial data'
},
legend: {
enabled: false
},
colorAxis: {
dataClasses: [{
from: -100,
to: 1,
color: '#C40401',
name: 'pseudonull(1s are the new null)'
}],
},
series : [{
name: 'Country',
mapData: Highcharts.maps['custom/europe'],
data: [
{
code: 'DE',
value: 1
}, {
code: 'IS',
value: 2
}, {
code: 'NO',
value: 2
}, {
code: 'SE',
value: 2
}, {
code: 'FI',
value: 2
}, {
code: 'DK',
value: 2
}
],
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: 'white',
formatter: function () {
if (this.point.value > 1) {
return this.point.name;
} else if(this.point.value == 1) {
return 'this is "null"';
}
}
},
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
}
}]
});
});

I am not very sure about what you try to achieve, but from my understanding, you want to attach click events to countries with NULL values.
I have created this example here: http://jsfiddle.net/on6v5vhr/
Apparently, if a country has a NULL value, it won't be able to have click events, but what I've done is to simulate this behaviour so I went through these steps:
Process your data and give all the null value the same particular value (France was null so I gave it the value of -999)
{code: 'FR', value: -999}
Show datalabels only for the countries that have a value and that values is different than -999
formatter: function() {
if (this.point.value && (this.point.value !== -999)) {
return this.point.name;
}
}
Show tooltip only for the countries that have a value different than -999
tooltip: {
formatter: function() {
if (this.point.value !== -999) {
return this.point.name;
} else {
return false;
}
}
}
Manually set the color same as the NULL color for all countries that have the value of -999
colorAxis: {
dataClasses: [{
from: -100,
to: 1,
color: '#C40401',
name: 'pseudonull(1s are the new null)'
}, {
from: -999,
to: -999,
color: 'rgba(0,0,0,0)',
name: 'No data'
}],
}