Task 50: Micro-Questionnaire Platform

Task 50: Micro -Questionnaire platform

For the crowd:

Have a certain JavaScript base

Difficulty:

Difficult

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

Mission Purpose

• Based on the various components of phase three, we learn the contents of modularization and front-end engineering, and use Html,css,javascript to complete a small complete website.

Task description

• Reference design drawings
• Implement a simple version of the questionnaire management system, like the following functions:
  • Questionnaire Management List
    • There is a head can display logo, do not need to implement login and other operations
    • Questionnaire Management List page default home page
    • There is a table to show all the questionnaires that have been created
    • The list includes the following columns: Questionnaire name, questionnaire status (unpublished, published, closed), and action area (edit, delete, view data)
    • When the questionnaire status is not published, the actions you can do for editing, deleting, and viewing the questionnaire
    • When the status of the questionnaire is published and ended, you can do things such as view data, view questionnaires
    • The left side of the table has a batch selection (multiple selection) checkbox, after multiple selection, can be bulk delete function, checkbox style By default, do not need to follow the style of the design diagram
    • When a questionnaire is not present, the table does not show, the page displays a large new questionnaire button
  • New and edited questionnaires
    • After clicking the New button in the Questionnaire management list, go to the questionnaire new page
    • Click on the Edit button of a survey line in the questionnaire list to go to the edit page of the questionnaire
    • The new page and the edit page are basically the same
    • The questionnaire has a title field that you can click to enter the Edit status
    • Can be used to increase the number of questions in the questionnaire operation, each questionnaire at least one problem, up to 10 questions
    • Problem types include: single-choice, multiple-choice, single-line text questions
    • You can change the location of all problems (move up, move Down), reuse, delete operations
    • The top problem does not move up, and the bottom question is not moved down
    • When clicked, add a new question (including options) that is identical to the one that was reused immediately below the question being reused.
    • For single-choice and multiple-choice questions, you can add, delete, change, and sort the options for the problem.
    • Text question can be set is required or not required
    • There is a survey to fill in deadlines, use a calendar component to make time choices, date selection cannot be earlier than the current date
    • Saving questionnaires can be saved by questionnaires.
    • Publish a questionnaire to make the status of the questionnaire a status in the release
    • When you click Publish, if the due date is earlier than the current date, you need to be prompted to modify the due date
  • Delete a questionnaire
    • After clicking on the Delete button of a questionnaire in the questionnaire management list, pop up a flyout to let the user confirm whether or not to delete the questionnaire two times, and delete the questionnaire if the user clicks Yes.
  • View the questionnaire
    • In the Questionnaire management list, click on the button to view the questionnaire, in a new window to open the Questionnaire page, the page is available for users to fill out the questionnaire page, the questionnaire is not published status and closed status, the questionnaire submitted is not valid.
    • This page requires good compatibility support on the mobile side
  • View data
    • After clicking the View Data button in the Questionnaire management list, go to a Data report page and present the selection of individual and multi-choice topics in chart form.
    • As presented in the design, each issue on the right with a chart to show the answer, choose the appropriate chart, the design is only indicative, the chart style does not need to be consistent with the design draft. Recommended single topic use pie chart, multi-choice use bar chart
    • The text question uses a percentage chart to show the effective answer proportion.
    • Back button click to return to List page
• Try the modular approach and tools in the project
• Try the CSS preprocessing tool in the project
• Try project building, packaging tools in your project

Task considerations

• The above description is only for the requirements description reference, not as an implementation of the design reference
• There are differences between the requirements described above and the rationality of real products, this task is based on technical learning, ignoring the problem of product design.
• Please note that the code style is neat and elegant
• The code contains the necessary comments
• Third-party frameworks, class libraries can be used rationally
• All data can be simulated by the front end, can also create a real-world server environment and code
• Do not require a real save, questionnaire filling and other operations, can use random, self-made data simulation to mock the data

Task Collaboration recommendations

• Brainstorm within the team to discuss and design new elements of the game
• If you are working on your own, you can do this in the following ways:
  • Team focused discussion, clear the topic requirements, ensure that the team each to the subject of cognitive consensus
  • Practice of accomplishing tasks individually
  • Cross-review other people's code, suggesting that everyone see at least one team member's code
  • Discuss each other and finally synthesize a copy of the best code within the group to submit
• If it is a division of work (recommended), can be divided into the following modules
  • List page
  • New and edited pages
  • Questionnaire Fill Page
  • View the Data report page

Task 50: Micro-Questionnaire Platform