Skip to content

Commit

Permalink
Merge pull request #39 from clpetersonucf/polish-for-1.3.0
Browse files Browse the repository at this point in the history 
Polish for 1.3.0
  • Loading branch information
@clpetersonucf
clpetersonucf authored Apr 23, 2024
2 parents d140a1a + 710d428 commit 28afeec
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 96 deletions.
1 change: 1 addition & 0 deletions src/assets/img/materia-logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/assets/materialogo.png
View file
Binary file not shown.
55 changes: 30 additions & 25 deletions src/creator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,6 @@
<div class="logo"></div>
<h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
<div ng-click="showTitleDialog = true" class="link">Edit...</div>
<button
ng-class= "{'qb-button': true, 'gray-out': !enableQuestionBank}"
ng-click="questionBankModal = !questionBankModal"
ng-disabled="items.length === 0">
Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
</button>
<span class="attempts">
<p>Incorrect guesses per phrase</p>
<div class="slide-btn">
Expand Down Expand Up @@ -59,31 +53,41 @@ <h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
<p>Randomize Order</p>
<input type="checkbox" ng-checked=enableQuestionBank ng-disabled=enableQuestionBank id="randomize" ng-model="random">
<label for="randomize" ng-class="{'disabled-look': enableQuestionBank}" class="checktoggle"></label>
</div>
<div class="question-tip randomizer-tip">?
<div class="qtip-box">
<p>
If <b>Question Bank</b> is on then the check to randomize order is disabled. This is because the question bank
randomizes the question order already.
</p>
<div class="question-tip randomizer-tip">?
<div class="qtip-box">
<p>
If <b>Question Bank</b> is on then the check to randomize order is disabled. This is because the question bank
randomizes the question order already.
</p>
</div>
</div>
</div>

<div class="partial">
<p>Partial scoring</p>
<input type="checkbox" id="partial" ng-model="partial">
<label for="partial" class="checktoggle"></label>
</div>
<div class="question-tip">?
<div class="qtip-box">
<p>
If <b>partial scoring</b> is on then students will receive credit equal to the percentage of the phrase they reveal.
When off students will receive a 100% if they guess the phrase correctly and a 0% otherwise.
</p>
<p>
If the student doesn't reveal the phrase after the number of allowed <b>incorrect guesses</b> they move on to the next phrase.
</p>
<div class="question-tip">?
<div class="qtip-box">
<p>
If <b>partial scoring</b> is on then students will receive credit equal to the percentage of the phrase they reveal.
When off students will receive a 100% if they guess the phrase correctly and a 0% otherwise.
</p>
<p>
If the student doesn't reveal the phrase after the number of allowed <b>incorrect guesses</b> they move on to the next phrase.
</p>
</div>
</div>
</div>

<button
class="qb-button"
ng-class= "{'gray-out': !enableQuestionBank}"
ng-click="questionBankModal = !questionBankModal"
ng-disabled="items.length === 0">
Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
</button>

<div class="bottom"></div>
</div>
<div class="pagination" ng-show="numberOfPages() > 1">
Expand Down Expand Up @@ -202,6 +206,8 @@ <h1>Guess the Phrase</h1>
<input type="button" value="Done" ng-click="hideCover()">
</div>
<div ng-class="{ show: questionBankModal }" ng-click= 'hideCover()' class="box question-bank-dialog">
<h1>Question Bank</h1>
<p>When the question bank is enabled, the widget can use a subset of phrases to create a randomized and unique experience every time the student hits play.</p>
<div class="enable-qb-question">
<label style="font-weight: bold;">Enable question bank? </label>
<div class="enable-qb-options" ng-click="$event.stopPropagation()">
Expand All @@ -213,14 +219,13 @@ <h1>Guess the Phrase</h1>
</div>
<div>
<span ng-show="enableQuestionBank" >
<label style="font-weight: bold;">How many questions to ask? </label>
<label style="font-weight: bold;">How many phrases per play? </label>
<div class="num-input-wrapper" ng-click="$event.stopPropagation()">
<input class="num-input" type="number" ng-model="questionBankValTemp" ng-change="validateQuestionBankVal()" step="1">
<span> out of {{items.length}} </span>
</div>
</span>
</div>
<p class="qb-warning">If question bank is enabled, questions will be randomized. </p>
<button class="dialog-close-button"
ng-click="questionBankModal = false"
ng-disabled="questionBankValTemp < 1 || questionBankValTemp > items.length">Confirm</button>
Expand Down
144 changes: 73 additions & 71 deletions src/creator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,23 +486,36 @@ button.add-question {
.question-bank-dialog {

position: fixed;
height: 380px;
width: 400px;
padding: 1em;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 0;
height: 200px;
width: 300px;

display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
flex-direction: column;
gap: 1em;
margin: 15px;

border: 0;

p {
font-size: 0.9em;
margin: 0.5em 1em;
}

label {
display: block;
margin-bottom: 0.5em;
}

input {
margin-top: 0;
padding: 0;
width: unset;
width: auto;
background: #ffffff;
font-size: 17px;
text-align: center;
Expand All @@ -520,7 +533,7 @@ button.add-question {
.num-input {
color: black;
outline: 1px solid black;
width: 35px;
width: 3em;
margin: 2px 5px 0 0;
}
}
Expand All @@ -541,16 +554,21 @@ button.add-question {
}

.dialog-close-button {
position: relative;
margin: 15 0 10 0;
position: absolute;
bottom: 2em;
margin-top: 10px;
box-shadow: none;
text-shadow: none;
font-size: 15px;
width: 100px;

border-radius: 0;
border: 0;

background-color: #70bd34;
color: black;
color: #fff;

&:hover {
background-color: #88df45;
border: 1px solid #88df45;
color: black;
cursor: pointer;
}
Expand Down Expand Up @@ -629,9 +647,13 @@ button.add-question {
top: 0px;
left: 0px;
right: 0px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
height: 100px;
background: #333;
padding: 26px 8px;
padding: 0 1em;
z-index: 100;
font-family: 'Lato';
font-weight: 300;
Expand All @@ -648,85 +670,69 @@ button.add-question {

.logo {
display: block;
background: url(assets/materialogo.png) no-repeat;
background: url(assets/img/materia-logo.svg) no-repeat;
width: 60px;
height: 50px;
float: left;
margin-left: 17px;
margin-top: 2px;
}
.center {
position:absolute;
margin-left: -25px;;
left: 50%;
top: 22px;
}

h1 {
margin-left: 8px;
font-family: 'Lato', serif;
font-weight: 300;
font-size: 24px !important;
vertical-align: middle;
margin-top: 3px;
float: left;
cursor: pointer;
max-width: 400px;
margin: -0.5em 0 0 0;

white-space: nowrap;
overflow: hidden;

font-family: 'Lato', serif;
font-weight: 300;
font-size: 24px;

cursor: pointer;
}
div.link {
float: left;
cursor: pointer;
position: relative;
top: -0.5em;
left: -1em;
display: inline-block;

margin: 5px;
margin-top: 5px;
margin-right: auto;
padding: 10px;
display: inline-block;
vertical-align: baseline;
z-index: 99;

font-size: 12px;
color: #ccc;
text-decoration: underline;
}
.sep {
display: block;
border-radius: 10px;
width: 4px;
height: 4px;
position: absolute;
right: 270px;
top: 28px;
background: #fff;
cursor: pointer;
}

.qb-button {
position: absolute;
position: relative;
top: -0.25em;
width: auto;
height: auto;
border-radius: 0;
background-color: $green;
color: #fff;
width: unset;
right: 590px;
top: 35px;

&:hover {
background-color: #7AD038;
cursor: pointer;
}

&:disabled {
background-color: #ccc;
border: 1px solid #ccc;
border: none;
background-color: #a5a5a5;
color: #fff;
cursor: not-allowed;
}

&.gray-out:not(:disabled) {
background-color: #5a5a5a;
border: 1px solid #5a5a5a;
color: #fff;

&:hover {
background-color: #938f8f;
border: 1px solid #938f8f;
cursor: pointer;
}

Expand All @@ -735,16 +741,15 @@ button.add-question {
}

.attempts {
position: absolute;
right: 395px;
position: relative;
top: -0.5em;
cursor: pointer;
top:0px;
margin-left: 34px;

p {
position: absolute;
// position: relative;
display: inline-block;
margin-left: -34px;
top: 0;
margin: 0 0 1em -34px;
white-space: nowrap;
}

Expand All @@ -760,7 +765,7 @@ button.add-question {
}
}
.slide-btn {
margin-top: 54px;
padding-bottom: 0.5em;
.bar {
height: 10px;
width: 135px;
Expand Down Expand Up @@ -813,10 +818,10 @@ button.add-question {
}
}
.partial {
position: absolute;
top: 0px;
right: 70px;
position: relative;
top: -0.5em;
font-family: "Lato";
padding-right: 40px;

label.checktoggle {
display: inline-block;
Expand Down Expand Up @@ -877,9 +882,9 @@ button.add-question {
}
}
.random {
position: absolute;
top: 0px;
right: 225px;
position: relative;
// top: 0px;
// right: 225px;
font-family: "Lato";

label.checktoggle {
Expand All @@ -896,7 +901,7 @@ button.add-question {

.question-tip {
position: absolute;
right: 28px;
right: 8px;
top: 15px;
padding: 2px;
border: 2px solid #fff;
Expand All @@ -910,9 +915,6 @@ button.add-question {

transition: all 0.15s ease;

&.randomizer-tip {
right: 190px;
}
&:hover {
opacity: 1;
background: #53a1d1;
Expand Down

0 comments on commit 28afeec

Please sign in to comment.