Video-Interview-Webpage/InterviewPage.html at master · Darkspur/Video-Interview-Webpage · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
	<title>Interview Page</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="InterviewStyle.css">
</head>
<body>
	<nav class="navbar navbar-dark d-flex flex-row-reverse">
		<a class="navbar-brand" href="#">
		  <img src="geass.jpg" width="30" height="30" class="d-inline-block align-top" alt="">
		  Bootstrap
		</a>
	</nav>
	<div class="container-fluid">
		<div class="row pt-3 pl-2">
			<div class="col-3" >
				<div class="card">
					<div class="card-header">
					<h3>Profile</h3>
					</div>
					<div class="card-body">
						<img src="https://www.pngfind.com/pngs/m/676-6764065_default-profile-picture-transparent-hd-png-download.png" style="width: 50%; height: 135px; margin-left: 23%;" class="rounded-circle">
						<h5 class="card-title pt-4">Candidate Name</h5>
						<p class="card-text">Applying for position: </p>
						<canvas id="myChart" width="400" height="400"></canvas>
						<script>
						var ctx = document.getElementById('myChart').getContext('2d');
						var myRadarChart = new Chart(ctx, {
								type: 'radar',
								data: {
										labels: ['O', 'C', 'E', 'A','N'],
										datasets: [{
											label: 'Candidate',
											backgroundColor: "rgba(59, 140, 219, 0.2)",
											data: [1,2,3,4,5],
											pointBorderWidth: 3,
    										pointBackgroundColor: "rgba(0, 83, 184, 0.8)",
											borderColor: "rgba(59, 140, 219, 0.6)",
											pointHoverRadius: 10,
											backgroundColor: "rgba(59, 140, 219, 0.2)"
										}]
									},
								options: {
									legend: {
										labels: {
											fontColor: 'black'
										},
									},
									scale: {
										ticks: {
											minor: {
												fontSize: 12,
												fontColor: '#666'
											},
											major: {
												fontSize: 12,
												fontColor: '#fff'
											},
											min: 0,
											max: 5
										},
										gridLines: {
											color: "black",
										}
									}
								}
							});
						</script>
					</div>
				  </div>
			</div>
			<div class="col-9" >
				<div class="row px-2 pb-2">
					<div class="col">
						<div class="card w-100">
							<div class="card-body d-flex row-recerse">
								<p id="question" style="width: 100%; height: 100px;"></p>
								<button type="button" id="prev" onclick="showPrevQuestion()"><</button>
								<button type="button" id="next" onclick="showNextQuestion()">></button>
							</div>
						  </div>
						</div>
				</div>
				<div class="row px-2 pb-2">
					<div class="col-9">
						<iframe style="width: 104%; height: 100%;" src="https://www.youtube.com/embed/R94ntpWVelw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
					</div>
					<div class="col-3">
						<h3 style="margin-left: 85px;">Rating</h3>
						<div class="btn-group-vertical pt-4" style="margin-left: 36%;">
							<button type="button" class="p-3 m-2" onclick="addRating(1)" value="1" id="ratingBtn1">1</button>
							<button type="button" class="p-3 m-2" onclick="addRating(2)" value="2" id="ratingBtn2">2</button>
							<button type="button" class="p-3 m-2" onclick="addRating(3)" value="3" id="ratingBtn3">3</button>
							<button type="button" class="p-3 m-2" onclick="addRating(4)" value="4" id="ratingBtn4">4</button>
							<button type="button" class="p-3 m-2" onclick="addRating(5)" value="5" id="ratingBtn5">5</button>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-9">
						<div class="form-group">
							<label for="comment" style="color: #302e2e;"><h4>Comment:</h4></label>
							<textarea class="form-control" rows="3" id="comment" placeholder="Write you comment here..." style="width: 104%;"></textarea>
						</div>
					</div>
					<div class="col-3 mt-4 pt-4">
						<button type="button" class="btn btn-success" onclick="saveResponse()" id="save">Save</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="function.js"></script>
</body>
</html>