index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>reveal.js – The HTML Presentation Framework</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/dracula.css" id="theme">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)" data-transition="zoom">
					<div class="r-hstack justify-center">
						<div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
						<div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
						<div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
					</div>
					<h2 style="margin-top: 20px;">Grade System</h2>
				</section>
				<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)" data-transition="zoom">
					<div class="r-stack">
						<div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
						<div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
						<div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
					</div>
					<h3 style="margin-top: 20px;">
						Presented by Zhengte Cai
                    </h3>
				</section>

				<section>

                    <section>
                        <h2>Overall Structure</h2>
                    </section>

                    <section>
                        <h2>
                            Shell frontend<br>
                            +<br> 
                            Web-like backend
                        </h2>
                    </section>

                    <section>
                        <h3>Client Process</h3>
                        <p>User interact with the system using <strong>shell.</strong></p>
                        <p>Shell uses <strong>fork</strong> and <strong>execve</strong> to forward commands to the requesting program in the bin directory.</p>
                        <img src="./img/client.png" style="width: 70%; height: 70%;">
                    </section>

                    <section>
                        <h3>Server Process</h3>
                        <p>Server registers functions in the specified <strong>path</strong>.</p>
                        <p>Request carry the path to the function. Server fork a process to response the request.</p>
                        <img src="./img/server.png" style="width: 70%; height: 70%">
                    </section>
                    <section>
                        <h3>Expandability</h3>
                        <p>All the function of the frontend and backend are independent of the main program, so as to realize the <strong>expandability</strong> of the system.</p>
                    </section>
                    
                </section>

				<section>
                    <section>
                        <h2>Admin</h2>
                    </section>
                    <section>
                        <h3>Capabilities</h3>
                        <ul style="margin-top: 35px;">
                            <li>View the directory tree</li>
                            <li>Update user's information</li>
                            <li>Update courses's information</li>
                            <li>Backup and recover the file system</li>
                        </ul>
                    </section>
                    <section>
                        <h3>View the directory tree</h3>
                        <img src="./img/tree.gif">
                        <p>
                            use command <strong>tree</strong> to view the tree.
                        </p>
                    </section>
                    <section>
                        <img src="./img/dirtree.png" style="width:50%; height:50%">
                    </section>
                    <section>
                        <h3>Update users's information</h3>
                        <img src="./img/useradd.gif">
                        <p>
                            use command <strong>useradd</strong> edit user's information.
                        </p>
                    </section>
                    <section>
                        <h3>Update courses's information</h3>
                        <img src="./img/courseadd.gif">
                        <p>
                            use command <strong>courseadd</strong> edit courses's information.
                        </p>
                    </section>
				</section>

				<section>
                    <section>
                        <h2>Teacher</h2>
                    </section>
                    <section>
                        <h3>Capabilities</h3>
                        <ul style="margin-top: 35px;">
                            <li>Create a new chapter</li>
                            <li>Create and Assign homework</li>
                            <li>Check and Grade homework</li>
                        </ul>
                    </section>
                    <section>
                        <h3>Create new chapter</h3>
                        <img src="./img/new.gif">
                        <p>
                            use command <strong>new</strong> to create chapters in order.
                        </p>
                    </section>
                    <section>
                        <h4>course directory</h4>
                        <img src="./img/chapter.png" style="width: 40%; height: 40%;">
                    </section>
                    <section>
                        <h3>Create and Assign homework</h3>
                        <img src="./img/assign.gif">
                        <p>
                            use command <strong>vim</strong> to create homework template.<br>
                            use command <strong>assign</strong> to assign homework.
                        </p>
                    </section>
                    <section>
                        <h4>homework template</h4>
                        <img src="./img/hwk.png">
                        <p>
                            A homework consists of multiple <strong>problems.</strong><br>
                            A problem consists of <strong>question</strong>, <strong>type</strong>, <strong>answer</strong>, <strong>score</strong>.
                        </p>
                    </section>
                    <section>
                        <h4>homework json format</h4>
                        <img src="./img/hwk_json.png" style="width: 70%; height: 70%;">
                    </section>
                    <section>
                        <h4>box directory</h4>
                        <img src="./img/box.png" style="width: 60%; height: 60%;">
                        <p>
                            The <strong>box</strong> directory is used to receive student's homework.
                        </p>
                    </section>
                    <section>
                        <h3>Check and Grade homework</h3>
                        <img src="./img/check.gif">
                        <p>
                            use command <strong>check</strong> append with <strong>filename</strong> to check the student's homework.
                        </p>
                    </section>
                    <section>
                        <h3>Check students's grade</h3>
                        <img src="./img/gradet.gif">
                        <p>
                            use command <strong>grade</strong> under course's dir to check students's grades.
                        </p>
                    </section>
				</section>

				<section>
                    <section>
                        <h2>Student</h2>
                    </section>
                    <section>
                        <h3>Capabilities</h3>
                        <ul style="margin-top: 35px;">
                            <li>Complete and Commit homework</li>
                            <li>Review graded homework</li>
                            <li>Check grade</li>
                        </ul>
                    </section>
                    <section>
                        <h4>student chapter directory</h4>
                        <img src="./img/chapter_hwk.png">
                    </section>
                    <section>
                        <h5>empty homework</h5>
                        <img src="./img/homework.png">
                    </section>
                    <section>
                        <h3>Complete and Commit homework</h3>
                        <img src="./img/commit.gif">
                        <p>
                            use command <strong>vim</strong> to open homework.<br>
                            use command <strong>commit</strong> to commit homework.
                        </p>
                    </section>
                    <section>
                        <h4>Answer</h4>
                        <img src="./img/answer.png" style="width: 50%; height: 50%;">
                        <p style="font-size: 35px;">
                            Extract the answers from the homework<br>
                            Sent it to teacher's <strong>box</strong>.
                        </p>
                    </section>
                    <section>
                        <h4>student chapter directory</h4>
                        <img src="./img/hwk_grade.png">
                    </section>
                    <section>
                        <h3>Review graded homework</h3>
                        <img src="./img/review.gif">
                        <p>
                            use command <strong>check</strong> to open homework.
                        </p>
                    </section>
                    <section>
                        <h3>Check grade</h3>
                        <img src="./img/grades.gif">
                        <p>
                            use command <strong>grade</strong> under course's dir to check the grade.
                        </p>
                    </section>
				</section>

                <section>
                    <section>
                        <h2>vim</h2>
                    </section>
                    <section>
                        <img src="./img/vim.png" style="width: 85%; height: 85%;">
                    </section>
                </section>

                <section>
                    <section>
                        <h2>Socket</h2>
                    </section>
                    <section>
                        <h3>Request</h3>
                    </section>
                    <section>
                        <h3>Response</h3>
                    </section>
                </section>

			</div>

		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/zoom/zoom.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/search/search.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>

			// Also available as an ES module, see:
			// https://revealjs.com/initialization/
			Reveal.initialize({
				controls: true,
				progress: true,
				center: true,
				hash: true,
                
				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
			});

		</script>

	</body>
</html>