practicum/week-6/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--DO NOT CHANGE THE FOLLOWING LINES !!!-->
    <link rel="stylesheet" href="styles.css">
    <script src="https://habahram.github.io/ISTA330/practicum/week-6/tests.js" type="text/javascript"></script>
    <title>Document</title>
</head>

<body>
    <div>
        In practicum 5 you created a react application, imagequiz, and deployed it to
        <i>https://your-github-username.github.io/imagequiz/</i>.
        In this practicum you extend your imagequiz application to have the following functionality:
        <ol>
            <li>
                When users click on an image, they are navigated to a page (this page is a page in your application) that contains a quiz. The user can then take 
                the quiz. 
            </li>
            <li>The file data.js contains the quizzes.</li>
            <li>Each quiz has six questions.</li>
            <li>Each question on the quiz has the following format: a picture and three options to choose from with only one of them
                being the correct answer. Each option contains a word supposed to be a name for the flower in the picture.
                The user can only select one option in each question.
            </li>
            <li>At the end of the quiz the score of the user will be shown on the page. The user can reapet the same
                 quiz or can go to the home page to start another quiz.
            </li>
        </ol> 
        This practicum resembles the image quiz application of Cambridge Dictionary which is available at <a href="https://dictionary.cambridge.org/us/plus/quiz/image/">https://dictionary.cambridge.org/us/plus/quiz/image/</a>.
        Have a look at the Cambridge Dictionary image quiz application to gain a better understanding of the practicum requirements.
        <br />
        
       
    </div>
    <div class="iframe-container">
        <iframe id="myApplicationFrame" src="" allowfullscreen></iframe>
    </div>
</body>

</html>