Question-Craft/sampleInput.html at main · EaswarGn/Question-Craft · GitHub

70 lines (61 loc) · 2.76 KB

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

<!DOCTYPE html>

<html lang="en">

<head>

<title>Input Samples</title>

<meta charset="utf-8">

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="styles.css">

<script src="https://kit.fontawesome.com/f393143bf3.js" crossorigin="anonymous"></script>

</head>

<body style="background:black; justify-content:center">

<button class="button" onclick="goBack()" style="position:absolute; z-index:110; top:0; left:0">

<span class="button-text" style="font-size: 2rem;">←</span>

<div class="fill-container"></div>

</button>

<h1 style="position:absolute; left:22vw; top:10vh">Create An Example Multiple Choice Question:</h1>

<div class="col-3" style="position:absolute; width:35%; box-shadow:0 0 60px 0 #524eee; left:26%; top:20%">

<input class="effect-8" type="text" placeholder="Sample Question">

<span class="focus-border">

<i></i>

</span>

</div>

<div class="col-3" style="position:absolute; box-shadow:0 0 30px 0 #524eee; left:30%; top:30%">

<input class="effect-8" type="text" placeholder="Option A:">

<span class="focus-border">

<i></i>

</span>

</div>

<div class="col-3" style="position:absolute; box-shadow:0 0 30px 0 #524eee; left:30%; top:40%">

<input class="effect-8" type="text" placeholder="Option B:">

<span class="focus-border">

<i></i>

</span>

</div>

<div class="col-3" style="position:absolute; box-shadow:0 0 30px 0 #524eee; left:30%; top:50%">

<input class="effect-8" type="text" placeholder="Option C:">

<span class="focus-border">

<i></i>

</span>

</div>

<div class="col-3" style="position:absolute; box-shadow:0 0 30px 0 #524eee; left:30%; top:60%">

<input class="effect-8" type="text" placeholder="Option D:">

<span class="focus-border">

<i></i>

</span>

</div>

<p style="position:absolute; left:17vw; top:85vh;font-weight:bold; color:red; font-size:1.5rem">Enter Topic:</p>

<div class="col-3 h" style="position:absolute; width:35%;left:26%; top:80%">

<input class="effect-8" type="text" placeholder="eg. Trigonometry, Physiology, Math, etc.">

<span class="focus-border">

<i></i>

</span>

</div>

<i class="fa-solid fa-star" style="position:absolute; top:36%; left:31%; color:gray"></i>

<i class="fa-solid fa-star" style="position:absolute; top:46%; left:31%; color:gray"></i>

<i class="fa-solid fa-star" style="position:absolute; top:56%; left:31%; color:gray"></i>

<i class="fa-solid fa-star" style="position:absolute; top:66%; left:31%; color:gray;"></i>

<a class="neon" onclick="createJSON()" style="position:absolute; left:75%; top:60%; color: white">Next</a>

<script src="sampleInput.js"></script>

</body>

</html>