How to create input question with output box answer text

How to create input question text and output different answer text textarea box with clear and copy by html java and CSS coding for blogger post.

In this post you learn To create a simple HTML and JavaScript setup for an input question text and an output answer text area as you want to write on blogger posts like a quiz one question one answer with a clear and copy button, you can use the following code. This example assumes you are embedding this code in a Blogger post with html view option and you can change the answer as you want to write,

    <title>Question and Answer</title>

CSS:

<style>

        body {

            font-family: Arial, sans-serif;

            text-align: center;

            margin: 20px;

        }

        textarea {

            width: 100%;

            height: 100px;

            margin-bottom: 10px;

        }

        button {

            padding: 10px;

            font-size: 16px;

            cursor: pointer;

        }

    </style>

HTML:

    <h2>Question:</h2>

    <textarea id="questionTextarea" placeholder="Type your question here"></textarea>

    <h2>Answer:</h2>

    <textarea id="answerTextarea" placeholder="Answer will appear here" readonly></textarea>

    <button onclick="generateAnswer()">Generate Answer</button>

    <button onclick="clearFields()">Clear</button>

    <button onclick="copyAnswer()">Copy Answer</button>

javascript:

    <script>

        function generateAnswer() {

            var question = document.getElementById('questionTextarea').value;

            // Add your logic to generate the answer based on the question

            var answer = "This is a sample answer.";

            document.getElementById('answerTextarea').value = answer;

        }

        function clearFields() {

            document.getElementById('questionTextarea').value = '';

            document.getElementById('answerTextarea').value = '';

        }

        function copyAnswer() {

            var answerTextarea = document.getElementById('answerTextarea');

            answerTextarea.select();

            document.execCommand('copy');

            alert('Answer copied to clipboard!');

        }

    </script>

This code provides a simple web page with two text areas for the question and answer, along with three buttons: "Generate Answer," "Clear," and "Copy Answer." The general answer function is a placeholder for the logic you want to implement to generate the answer based on the input question. The Clearfield function clears both the question and answer text areas. The copy answer function copies the content of the answer text area to the clipboard.

Replace This is a sample answer. with any text you want and will appear on the answer box

You can customize the appearance and behavior according to your needs. Save this code in an HTML file and then embed it into your Blogger post or page using the HTML/JavaScript gadget or by switching to HTML mode in the post editor and pasting the code.

Example output

Question:

Answer: