My code is not working

How do I make it so that when the user finishes the 7th prompt and then exits the prompt it continues on the 8th?

Go to this link (there is too much code to paste). Gem Hunt (inspect the page for HTML and css). and go to the quests tab and click on Fred the crafter speed through the obviously correct ones then when you get to “ALright I have unlocked it for you go craft a stoen furnace and come back.” Click ok click it again and you wills ee it restarts I want this to restart on 8 but I have been trying but it does not work.

JAVASCRIPT

function quest2() {
    if (stoneAmt >= 25) {
    quest2Popup();
    const textElement = document.getElementById('text1')
    const optionButtonsElement = document.getElementById('option-buttons1')


    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
    if (nextTextNodeId < 0) {
        return startGame()
    }
    if (nextTextNodeId == 50) {
        document.getElementById("craftitem").style.display = "block";
        quest2Popup();
    }

    if (nextTextNodeId == 100) {
        quest2Popup();
    }
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
    }


    const textNodes = [
    {
        id: 1,
        text: "Anvils are Black \n Handles are Wood \n And crafting is a Joy!",
        options: [
        {
            text: 'Anvils?',
            nextText: 2
        },
        {
            text: 'I hate poems',
            nextText: 12
        }
        ]
    },
    {
        id: 2,
        text: 'You don\'t know anvils?',
        options: [
        {
            text: 'I don\'t',
            nextText: 3
        }
        ]
    },
    {
        id: 3,
        text: 'They are used for crafting.',
        options: [
        {
            text: 'What is this \'crafting\'',
            nextText: 4
        },
        {
            text: 'Ah I know what this is',
            nextText: 5
        }
        ]
    },
    {
        id: 4,
        text: 'Crafting is the procces of making useful items by using pther items.',
        options: [
        {
            text: 'I get it now',
            nextText: 5
        }
        ]
    },
    {
        id: 5,
        text: 'Good! \n you look smart maybe I can teach you it.',
        options: [
        {
            text: 'Yes Please',
            nextText: 7
        },
        {
            text: 'NO',
            nextText: 6
        }
        ]
    },
    {
        id: 6,
        text: 'Fine.',
        options: [
        {
            text: 'End',
            nextText: 100
        }
        ]
    },
    {
        id: 7,
        text: 'ALright I have unlocked it for you go craft a stoen furnace and come back.',
        options: [
        {
            text: 'Ok',
            nextText: 50
        }
        ]
    },
    {
        id: 8,
        text: 'Thanks! I can find Quartz, emeralds, rubys, and may more!',
        options: [
        {
            text: 'End',
            nextText: 0
        },
        {
            text: 'What is "many more?"?',
            nextText: 9
        }
        ]
    },
    {
        id: 9,
        text: 'As I said before, I can find Quartz, emeralds, rubys.',
        options: [
        {
            text: 'Continue',
            nextText: 10
        }
        ]
    },
    {
        id: 10,
        text: 'The rest is a secret only if I find it I will tell you.',
        options: [
        {
            text: 'Done',
            nextText: 0
        }
        ]
    },
    {
        id: 12,
        text: 'Well that hurt my feelings',
        options: [
        {
            text: 'End',
            nextText: 100
        }
        ]
    }
    ]
    startGame();
    }

    else {
        failQuestspopo();
    }
}

What is the purpose of nextText? Is that not what you are telling it to go to if ‘OK’ is clicked?

1 Like

Look at this if statement:

    if (nextTextNodeId == 50) {
        document.getElementById("craftitem").style.display = "block";
        quest2Popup();
    }
1 Like

OK. So it executes quest2PopUp. Does quest2Popup tell your app to go to step 8?

It closes the popup.

Yes, it closes a pop up and takes you back to the main screen. I am not understanding what you want to see after that OK is clicked.

If you did not go to the link and Do as I say it will visualize what it does it closes the popup and noting else.

When I click the final OK you mentioned above, what exactly are you wanting to happen?

I followed your instructions to reproduce exactly as you specified.

It is to close which I have already done and if you click on the box again it brings you to id: 8.

But I do not see any code that would tell it to display step 8. You have so much repeated code it is quite a pain to look through it all. I would recommend making your code DRY and also fixing the error after clicking on the final OK.

Uncaught TypeError: Cannot read properties of undefined (reading ‘text’)

I have tryied but I deleted it because it failed. And that error I have no idea I have tired to fix it.

Here is what I see up until and shortly after clicking the final OK.

Peek 2022-11-16 19-06

Show me what you want to see when clicking the final OK. You said the popup should go away and it does, so I am not understanding what you expect to see if there is no popup that seems to contain the different text messages.

Virtually nothing, it’s not what I want to see its that if you click ok and when the popup closes and if you click back into the quest it will automatically start on id 8.

Just to clarify, when you click on the final OK, you do expect the start screen to show again. But if you click on Quests again, you expect the dialogue to start at id 8?

If the stat screen is just the quests tab and no popu yes.

I am very confused. I thought the pop up is where the text gets displayed. If there is no popup, then how would I even see the text for id 8?

what I mean is that when you click out AKA hit OK the popup dissapears and when you hit this tile.

image
The second time it will show id 8.

OK, I think I understand.

I think the issue is related to the error I see in the console.

Add:

console.log(textNode);

after the following line:

      const textNode = textNodes.find(
        (textNode) => textNode.id === textNodeIndex
      );

You will see undefined displayed, so the remainder of the showTextNode function does not run.

Also, add console.log('textNodeIndex = ' + textNodeIndex) to the first line of the showTextNode function and you will notice that textNodeIndex = 50 gets displayed after the final OK is clicked.

One or both of these issues are probably why id 8 text is not getting displayed. It is time for you to review your logic and see what might be causing this.