How to show different stories when clicked on the radio buttons?

Question

https://code.sololearn.com/Ww1LoYEyR0m5/?ref=app

Answer 1

add a click event to the input tag

<input onclick="//JS Event" type="radio">

Answer 2

Set the radio inputs in form tag and add onchange event on form tag.

https://code.sololearn.com/WnU9mSIwYA2a/?ref=app

Answer 3

and how to get an extra div tag for further stories?

Answer 4

First of all, you should build the story lines.
For example, using object literal.

var storylines = [
{
id: 1,
headline: "You are lost in the forest when you discover a mysterious fort. What would you do?",
choice1: "Enter it",
choice2: "Leave the place",
next1: 2,
next2: 3
},

{
id: 2,
headline: "Welcome to the mysterious fort. What would you do?",
choice1: "go to the place A",
choice2: "Leave the place",
next1: 4,
next2: 1
},
];

From there, you can get the object elements, headline and next id update to DOM accordingly based on the selected choices.

Answer 5

You could use
story.insertAdjacentHTML("afterend",'<div class="story">Welcome to The Misterious Fort.</div>');

to insert another div.story element.

https://code.sololearn.com/WnU9mSIwYA2a/?ref=app

Answer 6

But I want that if an user selects an option he or she can't select the other one
as another story will be displayes

Answer 7

Bithi D, you put the options in a form tag