SoalUraianSccreen

soal_uraian_screen.dart

import 'package:flutter/material.dart';
import '../models/soal_uraian.dart';

class SoalUraianScreen extends StatefulWidget {
  const SoalUraianScreen({super.key});

  @override
  State<SoalUraianScreen> createState() => _SoalUraianScreenState();
}

class _SoalUraianScreenState extends State<SoalUraianScreen> {
  //define the datas
  List<Question> questionList = getQuestions();
  int currentQuestionIndex = 0;
  int score = 0;
  Answer? selectedAnswer;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Pilihan Ganda"),
        centerTitle: true,
      ),
      backgroundColor: const Color.fromARGB(119, 194, 15, 15),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.blueAccent,
          image: DecorationImage(
            image: const AssetImage("assets/images/background.png"),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.5),
              BlendMode.srcOver,
            ),
          ),
        ),
        // margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
        child:
            Column(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
          const Text(
            "Soal Uraian",
            style: TextStyle(
              fontWeight: FontWeight.w900,
              color: Colors.white,
              fontSize: 24,
            ),
          ),
          _questionWidget(),
          _answerList(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _backButton(),
              _nextButton(),
            ],
          ),
        ]),
      ),
    );
  }

  _questionWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "Pertanyaan ${currentQuestionIndex + 1}/${questionList.length.toString()}",
          style: const TextStyle(
            color: Colors.white,
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        ),
        const SizedBox(height: 20),
        Container(
          alignment: Alignment.center,
          width: double.infinity,
          padding: const EdgeInsets.all(32),
          decoration: BoxDecoration(
            color: Colors.orangeAccent,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Text(
            questionList[currentQuestionIndex].questionText,
            style: const TextStyle(
              color: Colors.black87,
              fontSize: 20,
              fontWeight: FontWeight.w700,
            ),
          ),
        )
      ],
    );
  }

  _answerList() {
    return Column(
      children: questionList[currentQuestionIndex]
          .answersList
          .map(
            (e) => _answerButton(e),
          )
          .toList(),
    );
  }

  Widget _answerButton(Answer answer) {
    // bool isSelected = answer == selectedAnswer;

    // return Container(
    //   width: double.infinity,
    //   margin: const EdgeInsets.symmetric(vertical: 8),
    //   height: 50,
    //   child: ElevatedButton(
    //     style: ElevatedButton.styleFrom(
    //       foregroundColor: isSelected ? Colors.white : Colors.black,
    //       backgroundColor: isSelected ? Colors.orangeAccent : Colors.white,
    //       shape: const StadiumBorder(),
    //     ),
    //     onPressed: () {
    //       if (selectedAnswer == null) {
    //         if (answer.isCorrect) {
    //           score++;
    //         }
    //         setState(() {
    //           selectedAnswer = answer;
    //         });
    //       }
    //     },
    //     child: Text(
    //         style: const TextStyle(
    //           fontSize: 16,
    //         ),
    //         answer.answerText),
    //   ),
    // );

    return Center(
      child: Container(
        width: double.infinity,
        margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        height: 100,
        padding: const EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
        ),
        child: TextField(
          decoration: InputDecoration(
            labelText: 'Jawaban',
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            contentPadding:
                const EdgeInsets.symmetric(vertical: 30.0, horizontal: 30),
          ),
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w700,
          ),
          onChanged: (text) {
            answer.answerInput = text;
          },
        ),
      ),
    );
  }

  _backButton() {
    if (questionList.length <= 1) {
      // Hide the back button if the question length is 1 or less.
      return const SizedBox.shrink();
    } else {
      return SizedBox(
        width: MediaQuery.of(context).size.width * 0.25,
        height: 48,
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            foregroundColor: Colors.white,
            backgroundColor: Colors.blueAccent, // Change to desired color
            shape: const StadiumBorder(),
          ),
          onPressed: () {
            setState(() {
              if (currentQuestionIndex > 0) {
                selectedAnswer = null;
                currentQuestionIndex--;
              }
            });
          },
          child: const Text("<"),
        ),
      );
    }
  }

  _nextButton() {
    bool isLastQuestion = false;
    if (currentQuestionIndex == questionList.length - 1) {
      isLastQuestion = true;
    }

    return SizedBox(
      width: MediaQuery.of(context).size.width * 0.25,
      height: 48,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          foregroundColor: Colors.white,
          backgroundColor: Colors.blueAccent,
          shape: const StadiumBorder(),
        ),
        onPressed: () {
          if (isLastQuestion) {
            if (selectedAnswer != null) {
              String userAnswer = selectedAnswer!.answerInput;
              String correctAnswer =
                  questionList[currentQuestionIndex].answersList[0].answerText;

              if (userAnswer.toLowerCase() == correctAnswer.toLowerCase()) {
                score++;
              }
            }
            //display score

            showDialog(context: context, builder: (_) => _showScoreDialog());
          } else {
            if (selectedAnswer != null) {
              selectedAnswer!.answerInput = '';
            }
            //next question
            setState(() {
              selectedAnswer = null;
              currentQuestionIndex++;
            });
          }
        },
        child: Text(isLastQuestion ? "Submit" : ">",
            style: const TextStyle(
              fontSize: 16,
            )),
      ),
    );
  }

  _showScoreDialog() {
    bool isPassed = false;

    if (score >= questionList.length * 0.6) {
      //pass if 60 %
      isPassed = true;
    }
    String title = isPassed ? "Passed " : "Failed";

    return AlertDialog(
      title: Text(
        "$title | Score is $score",
        style: TextStyle(
            fontWeight: FontWeight.w900,
            fontSize: 20,
            color: isPassed ? Colors.green : Colors.redAccent),
      ),
      content: ElevatedButton(
        child: const Text("Restart"),
        onPressed: () {
          Navigator.pop(context);
          setState(() {
            currentQuestionIndex = 0;
            score = 0;
            selectedAnswer = null;
          });
        },
      ),
    );
  }
}