generate_story.html.js

<script>
    function generateStory() {
        // Get the selected options
        var genre = document.querySelector('input[name="genre"]:checked').value;
        var storyTeller = document.querySelector('input[name="story_teller"]:checked').value;
        var storyTellingStyle = document.querySelector('input[name="story_telling_style"]:checked').value;
        var creativity = document.querySelector('input[name="creativity"]:checked').value;
        
        // Call the Flask endpoint to generate the story
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/generate_story", true);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // Update the HTML with the generated story
                document.querySelector("#generated-story").innerHTML = xhr.responseText;
            }
        };
        xhr.send(JSON.stringify({
            "genre": genre,
            "story_teller": storyTeller,
            "story_telling_style": storyTellingStyle,
            "creativity": creativity
        }));
    }
</script>

<button onclick="generateStory()">Generate Story</button>
<div id="generated-story"></div>