<!DOCTYPE html>
<head>

    <title>Pariksha | Quiz List</title>
    <script>
        function start_quiz(x) {
            window.open("/quiz/?q="+x, "_blank", "fullscreen=yes");
        }
    </script>
    <style>
        #quiz_links {
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

        }
        #quiz_links:hover {
           background-color: #ce9a66;
            color: white;

        }
        body {
            margin: 0px;
            background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

        }
        table,td,tr{
          border: 1px solid black;
          border-collapse: collapse;
          width: 60%;
          text-align: center;
        }

        tr:nth-child(even) {background-color: #FAACA8;
background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);

        }
        tr:nth-child(odd) {background-color: #F4D03F;
background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);
}
        .qlinks {
            height: 60px;
            display: block;
            cursor: pointer;
            line-height: 60px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

        <center><h1 style="font-family: Optima; font-size:50px;"><a>Welcome Student {{user}}</a></h1><br>
           <h1>List of ongoing quizzes.</h1>
        </center>
        <div class="quiz">
            <center>
            <table >
        {%for quiz in quizId%}
            <br>
                    <tr>
                        <td>
                            <a id="quiz_links" class="qlinks" onclick="start_quiz({{quiz.quizId}})">Start Quiz :{{quiz.quizInfo}}</a>
                        </td>
                    </tr>

        {%endfor%}
                </table>
                </center>
        </div>


</body>
</html>