<template>
    <lightning-card title="Quize App In LWC">
        <div class="slds-var-m-around_medium">

           
            <!-- form tag -->
            <form action="">

                <template for:each={myQuestions} for:item="quiz">
                    <div key={quiz.id} class="slds-var-m-bottom_medium"> <!--margin bottom-->
                        <div><strong>{quiz.id} - {quiz.question}</strong></div>
                        <!-- component design - grid  -->
                        <div class="slds-grid slds-gutters  slds-var-p-bottom_medium"> <!--padding bottom-->
                            
                            <div class="slds-col ">
                                <!-- ratio input  -->
                                <input type="radio" name={quiz.id} value="a" onchange={changeHandler}/>
                                {quiz.answers.a}
                            </div>
                            <div class="slds-col">
                                <input type="radio" name={quiz.id} value="b" onchange={changeHandler}/>
                                {quiz.answers.b}
                            </div>
                            <div class="slds-col">
                                <input type="radio" name={quiz.id} value="c" onchange={changeHandler}/>
                                {quiz.answers.c}
                            </div>
                            
                        </div>
                    </div>
                </template>
                <!-- lightning-button -->
                <!-- Submit button  -->
                <lightning-button variant="brand" type="submit" label="Submit" title="Submit Quiz" class="slds-m-around_small" onclick={submitHandler} disabled={allNotSelected} >
                </lightning-button>
                
                <!-- Reset button  -->
                <lightning-button variant="brand" type="reset" label="Reset" title="Reset Quiz" class="slds-m-around_small" onclick={resetHandler}>
                </lightning-button>

            </form>

             <!-- template to show score  -->
             <template if:true={isSubmitted}>
                <div class={isScoredFull}> You have Scored {correctAnswers} out of {myQuestions.length}</div>
            </template>
          

        </div>
    </lightning-card>
</template>