-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Question Creator Page With Option to Select Number of Quiz Ques…
…tions
- Loading branch information
1 parent
933a578
commit 729447f
Showing
5 changed files
with
198 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
stanford/frontend/assets/js/components/dashboard/QuestionCreator.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| /* Styles for Question Creator */ | ||
|
|
||
| /* Header */ | ||
| .header { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| /* Form container */ | ||
| .form-container { | ||
| margin: 20px auto; | ||
| padding: 20px; | ||
| background-color: #fff; | ||
| border-radius: 10px; | ||
| box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); | ||
| width: 80%; | ||
| max-width: 800px; | ||
| } | ||
|
|
||
| /* Form label */ | ||
| .form-label { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /* Form input */ | ||
| .form-input { | ||
| padding: 8px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| transition: border-color 0.3s; | ||
| } | ||
|
|
||
| .form-input:focus { | ||
| border-color: #003366; /* Dark blue color when focused */ | ||
| } | ||
|
|
||
| /* Form select */ | ||
| .form-select { | ||
| padding: 8px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 5px; | ||
| transition: border-color 0.3s; | ||
| appearance: none; | ||
| } | ||
|
|
||
| .form-select:focus { | ||
| border-color: #003366; /* Dark blue color when focused */ | ||
| } | ||
|
|
||
| /* Answer option */ | ||
| .answer-option { | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| /* Submit button */ | ||
| .submit-button { | ||
| background-color: #003366; /* Dark blue color */ | ||
| color: #fff; /* Text color */ | ||
| padding: 10px 20px; /* Adjust padding as needed */ | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .submit-button:hover { | ||
| background-color: #001a33; /* Darker blue color on hover */ | ||
| } | ||
|
|
||
| /* Dark blue submit button */ | ||
| .submit-button-dark { | ||
| background-color: #003366; /* Dark blue color */ | ||
| color: #fff; /* Text color */ | ||
| padding: 10px 20px; /* Adjust padding as needed */ | ||
| border: none; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .submit-button-dark:hover { | ||
| background-color: #001a33; /* Darker blue color on hover */ | ||
| } |
109 changes: 109 additions & 0 deletions
109
stanford/frontend/assets/js/components/dashboard/QuestionCreator.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React from 'react'; | ||
| import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; | ||
| import "react-tabs/style/react-tabs.css"; | ||
| import { Container } from "reactstrap"; | ||
|
|
||
|
|
||
| export class QuestionCreator extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| numQuestions: 1, // Default to 1 question | ||
| questions: [] | ||
| }; | ||
| } | ||
|
|
||
| handleNumQuestionsChange = (event) => { | ||
| this.setState({ numQuestions: event.target.value }); | ||
| }; | ||
|
|
||
| handleSubmit = (event) => { | ||
| event.preventDefault(); | ||
| const questions = Array.from({ length: this.state.numQuestions }, (_, index) => ({ | ||
| id: index + 1, | ||
| question: '', | ||
| author: '', | ||
| difficulty: 'easy', | ||
| answers: ['', '', '', ''] | ||
| })); | ||
| this.setState({ questions }); | ||
| }; | ||
|
|
||
| renderQuestionFields = () => { | ||
| return this.state.questions.map((question, index) => ( | ||
| <div key={index} className="question-section"> | ||
| <div className="d-flex align-items-center question-fields"> | ||
| <div style={{ marginRight: '10px' }}> | ||
| <label className="form-label">Question #{question.id}:</label> | ||
| <input type="text" className="form-input" style={{ width: '500px' }} /> | ||
| </div> | ||
| <div style={{ marginRight: '10px' }}> | ||
| <label className="form-label">Author:</label> | ||
| <input type="text" className="form-input" style={{ width: '300px' }} /> | ||
| </div> | ||
| <div> | ||
| <label className="form-label">Difficulty:</label> | ||
| <select className="form-select"> | ||
| <option value="easy">Easy</option> | ||
| <option value="medium">Medium</option> | ||
| <option value="hard">Hard</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| <div className="d-flex align-items-center answer-fields"> | ||
| <div className="answer-option mr-3"> | ||
| <label className="form-label">Answer 1:</label> | ||
| <input type="text" className="form-input" style={{ height: '50px', width: '200px' }} /> | ||
| </div> | ||
| <div className="answer-option mr-3"> | ||
| <label className="form-label">Answer 2:</label> | ||
| <input type="text" className="form-input" style={{ height: '50px', width: '200px' }} /> | ||
| </div> | ||
| <div className="answer-option mr-3"> | ||
| <label className="form-label">Answer 3:</label> | ||
| <input type="text" className="form-input" style={{ height: '50px', width: '200px' }} /> | ||
| </div> | ||
| <div className="answer-option"> | ||
| <label className="form-label">Answer 4:</label> | ||
| <input type="text" className="form-input" style={{ height: '50px', width: '200px' }} /> | ||
| </div> | ||
| </div> | ||
| <br /> | ||
| <br /> | ||
| <br /> | ||
| </div> | ||
| )); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <Container className="vh-100 d-flex flex-column" style={{ backgroundColor: '#d8e6ff' }}> | ||
| <div> | ||
| <h1 className="header">Question Creator</h1> | ||
| </div> | ||
| <div className="form-container"> | ||
| <b className="form-label">Enter Number of Questions Here:</b> | ||
| <form onSubmit={this.handleSubmit}> | ||
| <div className="d-flex align-items-center mt-2"> | ||
| <input | ||
| name="numQuestions" | ||
| type="number" | ||
| min="1" | ||
| value={this.state.numQuestions} | ||
| onChange={this.handleNumQuestionsChange} | ||
| className="form-input mr-2" | ||
| /> | ||
| <button type="submit" className="submit-button">Submit</button> | ||
| </div> | ||
| </form> | ||
| <br /> | ||
| {this.renderQuestionFields()} | ||
| {/* Submit button at the bottom */} | ||
| <div className="d-flex justify-content-center"> | ||
| <button className="submit-button-dark">Submit</button> | ||
| </div> | ||
| </div> | ||
| </Container> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters