[K001112]简历网页

基于NodeJs 的简历网页

# Personal Website and Quiz Application Development Report

## Project Overview

This project aims to develop a simple website incorporating both a personal website and a quiz application. The site showcases personal information and provides an interactive quiz to test users’ basic scientific knowledge. Key features include:

– Personal Website Page: Displays a brief profile, including name, specialization, hobbies, etc.
– Detailed Information Page: Offers more detailed personal information, which could be a professional bio or an explanation of interests.
– Quiz Application: An interactive quiz game with multiple questions, where users have to select answers within a given time frame. The game records the user’s time and score, and presents a leaderboard.

## Table of Contents

1. [Structure and Integrity](#structure-and-integrity)
2. [Clarity and Readability](#clarity-and-readability)
3. [Design Explanation](#design-explanation)
4. [Challenges Discussed](#challenges-discussed)
5. [References](#references)

## Structure and Integrity

The project includes the following files and directories:
– `index.html`: Home page file.
– `about.html`: Detailed information page.
– `quiz.html`: Quiz application page.
– `public/static/css`: Stores CSS style files, including `style.css`, `plugins.css`, and other style files.
– `public/static/js`: Stores JavaScript files, such as `jquery.js`, `plugins.js`, and `init.js`.
– `public/static/picture`: Holds icons and images.
– `public/img/about`: Contains personal avatar images.

## Clarity and Readability

The entire project employs a clean HTML structure and clear CSS styles, with commented JavaScript code to enhance readability. Documentation and code follow proper naming conventions and file organization.

## Design Explanation

### 1. Website Design

#### Home Page (`index.html`)

– **Navigation Bar**: Includes links to Home, About, and Quiz.
– **Sidebar**: Displays personal info and navigation links.
– **Main Content**: Shows a brief introduction and the profile picture.

“`html
<div class=”sophia_tm_hero” id=”home”>
<div class=”content”>
<div class=”image”>
<div class=”main” data-img-url=”public/img/about/avatar.jpg”></div>
</div>
<div class=”extra”>
<h3 class=”name”>Hello! I’m Siri.</h3>
<p class=”text”>Welcome to my personal web page. I’m a student majoring in Information Management and Information Systems and also a lover for basketball and video game.</p>
</div>
</div>
</div>
“`
### 2. Personal Details Design (`about.html`)

– **Navigation Bar**: Contains links to Home, About, and Quiz.
– **Sidebar**: Displays personal info and navigation links.
– **Main Content**: Displays more detailed personal information or content about a specific topic.

### 3. Quiz Application Design (`quiz.html`)

– **Home Section**: Contains a form for the user’s name input.
– **Question Section**: Shows the current question and four options, with a timer counting down.
– **Results Section**: Displays the user’s results and correct answers.
– **Leaderboard Section**: Shows all users’ scores and rankings.

“`html
<div class=”mainpart” id=”quiz_qa” style=”display: none;”>
<div class=”left”>
<div class=”title”>
<p>Question <span id=”quiz_no”>1</span>：<span id=”quiz_q”>Where is the capital of China?</span></p>
</div>
<div class=”fields wow fadeInLeft” data-wow-duration=”1s”>
<div class=”first_row quiz_group”>
<div class=”quiz_option”>
<input type=”radio” id=”option1″ name=”option” value=”Shanghai”>
<label for=”option1″>Shanghai</label>
</div>
<div class=”quiz_option”>
<input type=”radio” id=”option2″ name=”option” value=”Beijing”>
<label for=”option2″>Beijing</label>
</div>
<!– More options –>
</div>
<span id=”timer”>Time to answer: — seconds</span>
</div>
</div>
</div>
“`

## Challenges Discussed

1. **Cross-browser Compatibility**: Ensuring consistent rendering across different browsers, especially for CSS styling and JavaScript functionality.
2. **Responsive Design**: Implementing responsive layouts that adapt to various devices using media queries and flexible design techniques.
3. **Timer Functionality**: Creating an accurate timer for the quiz countdown and handling timeout scenarios for users.
4. **Data Communication**: Implementing client-server communication using the `fetch` API to send and receive data, ensuring updates to user’s quiz results and leaderboard.

“`javascript
fetch(‘/submit?’ + params.toString())
.then(response => response.json())
.then(data => {
if (data.code == 1) {
success++;
}
$(“#answer_result”).text(data.data)
$(“#quiz_qa”).hide();
$(“#quiz_result”).show();
})
“`

## References

1. [MDN Web Docs](https://developer.mozilla.org/) – Provides extensive references for HTML, CSS, and JavaScript.
2. [W3Schools](https://www.w3schools.com/) – Offers basic web development tutorials and example code.
3. [Stack Overflow](https://stackoverflow.com/) – Resolved numerous specific issues encountered during development.
4. [Bootstrap](https://getbootstrap.com/) – Provided inspiration and examples for some responsive design elements.

Through this design and development process, a fully functional and user-friendly personal website and quiz application were created. Challenges were overcome, and code and features continually refined to ensure the final product’s quality and stability.