Given the HTML file below. For better separation of HTML and JavaScript, use event listeners so modify the JavaScript script for me
```
<!DOCTYPE html>
<html>
<head>
    <title>Multiple Choice Questions</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .question-container {
            margin-bottom: 30px;
        }
        .result {
            font-weight: bold;
        }
    </style>
</head>
<body>

    <!-- Question 1 -->
    <div class="question-container">
        <h2>Question 1:</h2>
        <p>What is a proper definition of an IAM Role?</p>
        <form id="question1">
            <label>
                <input type="radio" name="q1" value="A">
                A. IAM Users in multiple User Groups
            </label><br>
            <label>
                <input type="radio" name="q1" value="B">
                B. A set of permissions that define what actions are allowed and denied by an entity in the AWS environment
            </label><br>
            <label>
                <input type="radio" name="q1" value="C">
                C. A collection of users, groups, and roles
            </label><br>
            <label>
                <input type="radio" name="q1" value="D">
                D. A resource
            </label><br><br>
            <button type="button" onclick="checkAnswer('q1', 'result1', 'B')">Submit</button>
        </form>
        <p id="result1" class="result"></p>
    </div>

    <!-- Question 2 -->
    <div class="question-container">
        <h2>Question 2:</h2>
        <p>Which of the following is a primary benefit of using cloud computing?</p>
        <form id="question2">
            <label>
                <input type="radio" name="q2" value="A">
                A. Increased capital expenditures
            </label><br>
            <label>
                <input type="radio" name="q2" value="B">
                B. Elastic scalability
            </label><br>
            <label>
                <input type="radio" name="q2" value="C">
                C. Fixed server capacity
            </label><br>
            <label>
                <input type="radio" name="q2" value="D">
                D. On-premises data storage
            </label><br><br>
            <button type="button" onclick="checkAnswer('q2', 'result2', 'B')">Submit</button>
        </form>
        <p id="result2" class="result"></p>
    </div>

    <!-- Additional questions can be added similarly -->

    <script>
        function checkAnswer(questionName, resultId, correctAnswer) {
            // Get all radio buttons for the specified question
            var radios = document.getElementsByName(questionName);
            var selectedValue = '';
            // Loop through radio buttons to find the selected one
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    selectedValue = radios[i].value;
                    break;
                }
            }
            // Reference to the result paragraph
            var resultElement = document.getElementById(resultId);
            // Check if an answer is selected
            if (selectedValue === '') {
                resultElement.textContent = 'Please select an answer.';
                resultElement.style.color = 'orange';
            } else if (selectedValue === correctAnswer) {
                resultElement.textContent = 'Correct!';
                resultElement.style.color = 'green';
            } else {
                resultElement.textContent = 'Incorrect.';
                resultElement.style.color = 'red';
            }
        }
    </script>

</body>
</html>

```