Question

In JAVA the question will change as the quiz goes on (You don't have to do the whole project I just need help with the bolded portion of the question)

Design an interactive multiple-choice quiz app on your choice of subject. Your quiz must consist of at least 10 questions. You must have to use nested layouts and customize the buttons used in your app. The app must also display the user’s progress throughout the quiz, showing the question number (out of 10) in a TextView or using a progress bar about the quiz questions. You must have to include atleast two different sounds, one sound for the incorrect answer selection by the user and second sound for the correct answer selection by the user. Display the result of quiz to the user once he/she finished the quiz and also ask the user to rate the quiz at the end (Use rating bar for this purpose). After the user submit the rating, display a greeting message of your choice (one example is: “Thank you for your participation”) to the user using AlertDialog and ask if user want to reset the quiz or exit.

Answer 1

css code for create Menu for Home Page

< div id='cssmenu'>
< ul>
   < li class=''>< a href='${pageContext.request.contextPath}'>< span>Home< /span>< /a>< /li>
   < li>< a href='${pageContext.request.contextPath}/login'>< span>Login< /span>< /a>< /li>
   < li>< a href='${pageContext.request.contextPath}/register'>< span>Register< /span>< /a>< /li>
   < li class='#'>< a href='#'>< span>Submit a Question< /span>< /a>< /li>
   < li class='#'>< a href='#'>< span>Feedback< /span>< /a>< /li>
   < li>< a href='#'>< span>Contribute< /span>< /a>< /li>
   < li>< a href='#'>< span>Contact us< /span>< /a>< /li>
< /ul>
< /div>

< c:if test='${not empty sessionScope.user}'>

< div style="position:absolute;top:70px;left:1100px">
Logged as < a href="#" class="button username">${sessionScope.user}< /a>
< /div>

< div style="position:absolute;top:70px;left:1300px">
< a href='${pageContext.request.contextPath}/logout'>Logout< /a>
< /div>

< /c:if>

code to show the quiz images on home page

< div style="position:absolute;left:120px;top:60px">
< table cellpadding="0" cellspacing="50">

< tr>
< td>< a href="takequiz?test=java">< img height="150" width="150" src="${pageContext.request.contextPath}/images/java.png"/>< /a>< /td>
< td>< a href="takequiz?test=javascript">< img height="150" width="150" src="${pageContext.request.contextPath}/images/javascript.png"/>< /a>< /td>
< td>< a href="takequiz?test=sql">< img height="150" width="150" src="${pageContext.request.contextPath}/images/sql-logo.png"/>< /a>< /td>
< td>< a href="takequiz?test=python">< img height="150" width="150" src="${pageContext.request.contextPath}/images/python.jpg"/>< /a>< /td>
< /tr>

< tr>
< td>< a href="takequiz?test=css">< img height="150" width="150" src="${pageContext.request.contextPath}/images/css.jpg"/>< /a>< /td>
< td>< a href="takequiz?test=php">< img height="150" width="150" src="${pageContext.request.contextPath}/images/php-logo.jpg"/>< /a>< /td>
< td>< a href="takequiz?test=linux">< img height="150" width="150" src="${pageContext.request.contextPath}/images/logo-linux.png"/>< /a>< /td>
< td>< a href="takequiz?test=mongodb">< img height="150" width="150" src="${pageContext.request.contextPath}/images/mongodb_logo.png"/>< /a>< /td>
< /tr>

< /table>
< /div>

Instruction how to create the UI page for user registration

There is nothing new in the user registration page; just an Hyper Text Markup Language  form awaiting the user to provide his details such as name, email adress and password. Once we get that, we pass this to Registration Controller servlet to create an account.

User Registration Code

we use Servlet and Jsp for creating user registration page

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {          
                String username=request.getParameter("username");
                String email=request.getParameter("email");
                String password=request.getParameter("password");

                Connection con=DatabaseConnectionFactory.createConnection();

                try
                {
                 Statement st=con.createStatement();
                 String sql = "INSERT INTO users values ('"+username+"','"+password+"','"+email+"')";
                                System.out.println(sql);
                 st.executeUpdate(sql);
                }catch(SQLException sqe){System.out.println("Error : While Inserting record in database");}
                try
                {
                 con.close();   
                }catch(SQLException se){System.out.println("Error : While Closing Connection");}
        request.setAttribute("newUser",username);
                RequestDispatcher dispatcher=request.getRequestDispatcher("/WEB-INF/jsps/regSuccess.jsp");
                dispatcher.forward(request, response);          
        }

Getting Database Connection

In this application we use MySQL database to store user details. To get a connection to database we have defined a static method createConnection in DatabaseConnectionFactory class, where all database specific information is stored. we use JDBC concept to store details of user in to database.

Code to create User table in My SQL Database

create table users(username varchar(50),email varchar(50),password varchar(50))

DbConnect.java

public class DbConnect{

        private static String dbURL="jdbc:mysql://localhost/quiz";
        private static String dbUser="root";
        private static String dbPassword="";

        public static Connection createConnection()
        {
                 Connection con=null;
                try{
                        try {
                                   Class.forName("com.mysql.jdbc.Driver");
                                }
                                catch(ClassNotFoundException ex) {
                                   System.out.println("Error: unable to load driver class!");
                                   System.exit(1);
                                }                       
                     con = DriverManager.getConnection(dbURL,dbUser,dbPassword);
                   }
                  catch(SQLException sqe){ System.out.println("Error: While Creating connection to database");sqe.printStackTrace();}
                return con;
        }
}

Details to create Login Page after user registrstion

Login page will be  similar to registration page where we are providing two input fields asking user to provide username and password. when username and password entered by the user we pass it to LoginController to authenticate user.

Login Validation Code

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                String username=request.getParameter("username");
                String password=request.getParameter("password");                               
                Connection con=DatabaseConnectionFactory.createConnection();            
                ResultSet set=null;
                int i=0;
                try
                {
                 Statement st=con.createStatement();
                 String sql = "Select * from  users where username='"+username+"' and password='"+password+"' ";
                                System.out.println(sql);
                 set=st.executeQuery(sql);
                 while(set.next())
                 {
                         i=1;
                 }
                 if(i!=0)
                 {   HttpSession session=request.getSession();
                     session.setAttribute("user",username);
                         RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/jsps/home.jsp");
                         rd.forward(request, response);

                 }
                 else
                 {   request.setAttribute("errorMessage","Wrong! username or password");
                         RequestDispatcher rd=request.getRequestDispatcher("/WEB-INF/jsps/login.jsp");
                         rd.forward(request, response);
                 }
                }catch(SQLException sqe){System.out.println("Error : While Fetching records from database");}
                try
                {
                 con.close();   
                }catch(SQLException se){System.out.println("Error : While Closing Connection");}
        }

MainController for the App

this will be MainController where we have write the code to redirect the user to appropriate page according to the incoming request url.

@WebServlet(urlPatterns = { "/login", "/register", "/takequiz", "/logout" })
public class MainController extends HttpServlet {
        private static final long serialVersionUID = 1L;

        protected void doGet(HttpServletRequest request,
                        HttpServletResponse response) throws ServletException, IOException {

                String applicationContextPath = request.getContextPath();

                if (request.getRequestURI().equals(applicationContextPath + "/")) {
                        RequestDispatcher dispatcher = request
                                        .getRequestDispatcher("/WEB-INF/jsps/home.jsp");
                        dispatcher.forward(request, response);
                } else if (request.getRequestURI().equals(
                                applicationContextPath + "/login")) {
                        RequestDispatcher dispatcher = request
                                        .getRequestDispatcher("/WEB-INF/jsps/login.jsp");
                        dispatcher.forward(request, response);
                } else if (request.getRequestURI().equals(
                                applicationContextPath + "/register")) {
                        RequestDispatcher dispatcher = request
                                        .getRequestDispatcher("/WEB-INF/jsps/register.jsp");
                        dispatcher.forward(request, response);
                } else if (request.getRequestURI().equals(
                                applicationContextPath + "/takequiz")) {
                        request.getSession().setAttribute("currentquiz", null);

                        String quiz = request.getParameter("test");
                        request.getSession().setAttribute("quiz", quiz);

                        System.out.println(request.getSession().getAttribute("user"));
                        if (request.getSession().getAttribute("user") == null) {
                                request.getRequestDispatcher("/login").forward(request,
                                                response);

                        } else {
                                RequestDispatcher dispatcher = request
                                                .getRequestDispatcher("/WEB-INF/jsps/quizDetails.jsp");
                                dispatcher.forward(request, response);
                        }
                } else if (request.getRequestURI().equals(
                                applicationContextPath + "/logout")) {
                        request.getSession().invalidate();
                        RequestDispatcher dispatcher = request
                                        .getRequestDispatcher("/WEB-INF/jsps/home.jsp");
                        dispatcher.forward(request, response);
                }

        }

}

  Logout Functionality

when the user clicks on logout, button link session iwill be terminate and all the objects bind in the session are removed.

request.getSession().invalidate();

Storing the Quiz questions

we store the questions in separate XML files, we can not store it in the database.

< quiz>
  < title>MongoDB Quiz (14/10/2020)< /title>
    < questions>    
      < question>
        < quizquestion>MongoDB is a < /quizquestion>
        < answer>Relational Database< /answer>
        < answer>Object Relational Database< /answer>
        < answer>Graph Database< /answer>
        < answer>Document Database< /answer>
        < correct>3< /correct>
      < /question>

      < question>
        < quizquestion>What is the name of MongoDB server ?< /quizquestion>
        < answer>mongoserver< /answer>
        < answer>mongod< /answer>
        < answer>mongodb< /answer>
        < answer>mongo< /answer>
        < correct>1< /correct>
      < /question>

      < question>
        < quizquestion>What is the name of MongoDB client ?< /quizquestion>
        < answer>mongo< /answer>
        < answer>mongod< /answer>
        < answer>mongodb< /answer>
        < answer>mongo-client< /answer>
        < correct>0< /correct>
      < /question>
< /questions>
< /quiz>

How to Read the Questions Stored in XML File

To read the questions from the XML file we create a document that represents the XML file containing quiz questions. Whenever the user clicks on the next or previous button we call the setQuestion(int i) method, giving the index of question that we want to read and at the same time that question is saved in an ArrayList of QuizQuestion.

method How to Represent a Question?

in QuizQuestion class we represents a single quiz question; each question will have a number, question statement, options and one correct option index.

QuizQuestion.java

public class QuizQuestion {

        int questionNumber;
        String question;
        String questionOptions[];
        int correctOptionIndex;

        public String getQuestion()
        { 
                return question;
        }

        public int getQuestionNumber()
        {
                return questionNumber;
        }

        public void setQuestionNumber(int i)
        {
                questionNumber=i;
        }

        public int getCorrectOptionIndex()
        {
                return correctOptionIndex;
        }

        public String[] getQuestionOptions()
        {
                return questionOptions;
        }

        public void setQuestion(String s)
        {
                question=s;
        }
        public void setCorrectOptionIndex(int i)
        {
                correctOptionIndex=i;
        }
        public void setQuestionOptions(String[]s)
        {
                questionOptions=s;
        }

}

Note : This is a web application, multiple users will be taking quiz at same time. We have to make sure that one user’s answer does not get into another user’s answer or quiz.

We will create an quiz class because When the user clicks on start quiz button to start the quiz, we will create a new instance of quiz passing the test type for eg. Java, PHP, CSS etc. So each user will have a different instance of quiz class

public class quiz {
        Document dom;
        public int currentQuestion=0;   

        public Map selections=new LinkedHashMap();
        public ArrayList questionList = new ArrayList(10);

        public quiz(String test) throws SAXException,ParserConfigurationException,IOException, URISyntaxException{
                dom=CreateDOM.getDOM(test);
        }