Newer
Older
<div class="col-sm-3" *ngFor="let result of mockResults">
<!-- cards -->
<div class="card" style="width: 410px; justify-content: center;">
<!--<img class="card-img-top" src="java.png" alt="java" style="width: 100px; height: auto; margin-left: auto; margin-right: auto; padding-top: 15px; box-shadow: 3px;">-->
<div class="card-body">
<h5 class="card-title">{{result.title}}</h5>
<p class="card-text" style="text-align: left;">This exercise provides a spimle Java IO Test. And some aditional informations about this course</p>
</div>
<div class="card-body">
<!-- card rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<p class="card-text">Rating</p>
</div>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div> <!-- card rating end-->
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!-- card bookmark-->
<div style="float: left; width: 100%;">
<div style="float: left;">
<p class="card-text">Bookmark</p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"></label>
</div>
</div> <!-- card bookmark end-->
</div>
<div class="card-body" style="text-align: center;">
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#myModal">Open course</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<!--<img class="card-img-top" src="java.png" alt="java" style="width: 50px; height: auto; float: left;">-->
<h4 class="modal-title">Java IO Tests</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<p style="padding-bottom: 15px; text-align: justify;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="row">
<div class="col-6 col-md-4" style="margin-bottom: 15px;">
<p style="text-align: left;"><strong>Details</strong><hr></p>
<!-- modal rating-->
<div style="float: left; width: 100%; margin-bottom: 5px;">
<div style="float: left; padding-top: 15px;">
<p class="card-text">Rating</p>
</div>
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div> <!-- modal rating end-->
<!-- modal bookmark-->
<div style="float: left; width: 100%; margin-bottom: 25px;">
<div style="float: left;">
<p class="card-text">Bookmark</p>
</div>
<div class="form-check" style="float: right; padding-right: 10px;">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1"></label>
</div>
</div> <!-- modal bookmark end-->
<button type="button" class="btn btn-outline-secondary" style="display: block; margin-bottom: 5px;" >Show hit details</button>
<button type="button" class="btn btn-outline-secondary" style="display: block;">Show all excerises </br> for this course</button>
</div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong>Meta data</strong><hr></p>
<p style="text-align: left;">Program Language: Java
<br>Creator: Michael Breu
<br>Last update: 26.11.2020
<br>License: CCv2</p>
<a href="https://git-scm.com/" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: right;">Git</a>
</div>
<div class="col-6 col-md-4"></div>
<div class="col-12 col-md-8">
<p style="text-align: left;"><strong>Export options</strong><hr></p>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Export ArtTEMIS</a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Export LaTeX</a>
<a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true" style="float: left; margin-right: 5px; margin-top: 5px;">Download file</a>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- Modal end-->
</div>
</div>
</div> <!-- card end-->
</div> <!-- col-sm-3 end -->