github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/pages/AboutPage.tsx (about) 1 import React from 'react' 2 import Alerts from '../components/alerts/Alerts' 3 4 5 /* AboutPage displays information about QuickFeed. Mainly displayed to non-logged in users. */ 6 const AboutPage = (): JSX.Element => { 7 return ( 8 <div> 9 <div className="banner"> 10 <div key="jb" id="0" className="jumbotron"> 11 <div key="cblock" className="centerblock container"> 12 <h1>Automated student feedback</h1> 13 <p> 14 <strong>QuickFeed </strong> 15 provides instantaneous feedback to students on 16 their programming assignments. It is also a 17 valuable tool for teachers when grading lab 18 assignments. 19 </p> 20 <p> 21 <a className="btn btn-primary btn-lg" href="#quickfeed" role="button">Learn more »</a> 22 </p> 23 </div> 24 </div> 25 </div> 26 <Alerts /> 27 <div key="container" className="container"> 28 29 <div key="rowheader" className="row marketing"> 30 <div key="gh" className="col-lg-4"> 31 <img 32 className="img-circle" 33 src="/assets/img/GitHub-Mark-120px-plus.png" 34 alt="GitHub logo" style={{ width: "140px", height: "140px" }} /> 35 <h2>GitHub Integration</h2> 36 <p> 37 Manage all students and courses on GitHub. 38 Each student gets their own repository. 39 Teachers get separate repositories for publishing assignments and information to students. 40 All taken care of automatically. 41 </p> 42 <p> 43 <a className="btn btn-default" href="#versioncontrol" role="button">View details »</a> 44 </p> 45 </div> 46 <div key="ci" className="col-lg-4"> 47 48 <img 49 className="img-circle" 50 src="/assets/img/overlapping-arrows.png" 51 style={{ width: "140px", height: "140px" }} 52 /> 53 <h2>Continuous Integration</h2> 54 <p> 55 Instantaneous feedback to students on how well their code performs. 56 Students can quickly identify what they need to focus on to improve. 57 All customizable for the teaching staff. 58 </p> 59 <p> 60 <a className="btn btn-default" href="#ci" role="button"> 61 View details » 62 </a> 63 </p> 64 </div> 65 <div key="grade" className="col-lg-4"> 66 <img 67 className="img-circle" 68 src="/assets/img/Aplus2.png" 69 alt="A+ image" style={{ width: "140px", height: "140px" }} /> 70 <h2>Fair Grading</h2> 71 <p> 72 On due date of an assignment, the most recent version 73 of each student's code is available through GitHub. 74 Easily accessible for the teachers. 75 Together with latest build log, this makes grading easier and more fair. 76 </p> 77 <p> 78 <a className="btn btn-default" href="#grading" role="button">View details »</a> 79 </p> 80 </div> 81 </div> 82 <section id="#quickfeed"> 83 <hr className="featurette-divider" /> 84 <div key="row1" className="row featurette"> 85 <div key="c1r1" className="col-md-7"> 86 <h2 className="featurette-heading"> 87 QuickFeed: <span className="text-muted">Automated student feedback</span> 88 </h2> 89 <p className="lead"> 90 QuickFeed aims to provide students with fast 91 feedback on their lab assignments, and is designed 92 to help students learn about state-of-the-art tools 93 used in the industry. 94 QuickFeed builds upon version control systems and 95 continuous integration. 96 When students upload code to their repositories, 97 QuickFeed automatically builds their code and 98 provides feedback based on tests supplied by the 99 teaching staff. 100 When grading assignments, teaching staff can access 101 the results of test execution and have a valuable 102 tool in the grading process. 103 </p> 104 </div> 105 <div key="c2r1" className="col-md-5"> 106 <img 107 className="featurette-image img-responsive about" 108 src="/assets/img/intro1.png" 109 alt="Generic placeholder image" /> 110 </div> 111 </div> 112 </section> 113 114 <section id="versioncontrol"> 115 116 <hr className="featurette-divider" /> 117 <div key="row2" className="row featurette"> 118 <div key="c1r2" className="col-md-5"> 119 <img 120 className="featurette-image img-responsive about" 121 src="/assets/img/intro3.png" 122 alt="Generic placeholder image" /> 123 </div> 124 <div key="c2r2" className="col-md-7"> 125 <h2 className="featurette-heading"> 126 GitHub Integration: <span className="text-muted">Managing courses and students</span> 127 </h2> 128 <p className="lead"> 129 A course is an organization on GitHub. 130 Students get access to their own private GitHub repository. 131 Uploading their code for review or grading, students can 132 learn to use git for version control. 133 </p> 134 </div> 135 </div> 136 </section> 137 138 <section id="ci"> 139 140 <hr className="featurette-divider" /> 141 <div key="row3" className="row featurette"> 142 <div key="c1r3" className="col-md-7"> 143 <h2 className="featurette-heading"> 144 Continuous Integration: <span className="text-muted">builds and tests student code. </span> 145 </h2> 146 <p className="lead"> 147 As code gets pushed up to GitHub, an automatic build process 148 defined by the teacher, generates feedback to students. 149 When the build process is completed, student gets immediate 150 access to this feedback on their personal course page. 151 Tests defined by either teachers or students will be processed 152 and tell students about their progress on the assignments. 153 </p> 154 </div> 155 <div key="c2r3" className="col-md-5"> 156 <img 157 className="featurette-image img-responsive about" 158 src="/assets/img/intro2.png" 159 alt="Generic placeholder image" /> 160 </div> 161 </div> 162 </section> 163 164 <section id="grading"> 165 166 <hr className="featurette-divider" /> 167 <div key="row4" className="row featurette"> 168 <div key="c1r4" className="col-md-5"> 169 <img 170 className="featurette-image img-responsive about" 171 src="/assets/img/intro4.png" 172 alt="Generic placeholder image" /> 173 </div> 174 <div key="c2r4" className="col-md-7"> 175 <h2 className="featurette-heading"> 176 Grading: <span className="text-muted">Easy and Fair</span> 177 </h2> 178 <p className="lead"> 179 On the due date, teachers can access the test results and 180 use this as a tool in the grading process. 181 The teaching staff will immediately know which of their 182 tests passed, and how much of the code is covered by the tests. 183 </p> 184 </div> 185 </div> 186 </section> 187 188 <footer> 189 <hr /> 190 <p className="pull-right"><a href="#">Back to top</a></p> 191 </footer> 192 </div> 193 </div> 194 195 ) 196 } 197 198 export default AboutPage