Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
S
Survey-Quizgets
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
MACAO
Survey-Quizgets
Commits
6677057d
Commit
6677057d
authored
1 year ago
by
Eliott Sammier
Browse files
Options
Downloads
Patches
Plain Diff
Add open gap-fill type, with example
parent
7cb614e4
No related branches found
No related tags found
No related merge requests found
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
src/gapfill-open.js
+63
-0
63 additions, 0 deletions
src/gapfill-open.js
src/index.js
+2
-0
2 additions, 0 deletions
src/index.js
src/json.js
+11
-1
11 additions, 1 deletion
src/json.js
src/style.css
+1
-1
1 addition, 1 deletion
src/style.css
with
77 additions
and
2 deletions
src/gapfill-open.js
0 → 100644
+
63
−
0
View file @
6677057d
/**
* Custom SurveyJS question type for a "fill-in-the-gaps" text,
* with an open-ended text input for each gap
*/
export
const
gapfillOpenWidget
=
{
name
:
"
gapfill-open
"
,
title
:
"
Gap-Fill Text (Open)
"
,
/**
* This function should return true when the widget and all needed resources
* are loaded
*/
widgetIsLoaded
:
function
()
{
return
true
;
},
/**
* This function should return true if the widget should be applied to the question */
isFit
:
function
(
question
)
{
return
question
.
getType
()
===
this
.
name
;
},
init
()
{
//Register a new type using the empty question as the base.
Survey
.
Serializer
.
addClass
(
this
.
name
,
[],
null
,
"
empty
"
);
},
/** Static HTML template rendered by SurveyJS */
htmlTemplate
:
'
<p id="gapfill-container"><template id="template-gap"><input type="text" class="sd-input inline-input"/></template></p>
'
,
/**
* Function called after the HTML template is rendered. This time we actually have the `question` object
* and the `el` element, to build the question according to the JSON
*/
afterRender
:
function
(
question
,
el
)
{
// The gap-fill text is made of segments, which are either plain pieces
// of text (strings) or "gaps" (objects).
// We append these to build the text, turning strings into <span>s and
// gaps into <input> text fields
let
nbGaps
=
0
;
const
segmentElems
=
new
DocumentFragment
();
// a bit faster than mutating the DOM all the time
const
gapTemplate
=
document
.
getElementById
(
"
template-gap
"
).
content
.
firstChild
;
for
(
const
segment
of
question
.
jsonObj
.
segments
)
{
let
segmentElem
;
if
(
typeof
segment
===
'
string
'
||
segment
instanceof
String
)
{
segmentElem
=
document
.
createElement
(
"
span
"
);
segmentElem
.
innerText
=
segment
;
}
else
{
// It's a gap
// Create the <input> element
segmentElem
=
gapTemplate
.
cloneNode
(
true
);
segmentElem
.
setAttribute
(
"
data-index
"
,
nbGaps
);
// The node knows its index
// Add listener to update the question's value when the input value changes
segmentElem
.
addEventListener
(
"
change
"
,
(
e
)
=>
{
// The input node knows its index, therefore is able to update the question value at the correct index
question
.
value
[
parseInt
(
e
.
target
.
getAttribute
(
"
data-index
"
))]
=
e
.
target
.
value
;
});
nbGaps
++
;
}
// Add segment
segmentElems
.
appendChild
(
segmentElem
);
}
// Initialize question value array
question
.
value
=
new
Array
(
nbGaps
);
// Finally add everything to the DOM
el
.
appendChild
(
segmentElems
);
},
};
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/index.js
+
2
−
0
View file @
6677057d
import
{
json
}
from
"
./json.js
"
import
{
gapfillSelectWidget
}
from
"
./gapfill-select.js
"
;
import
{
gapfillOpenWidget
}
from
"
./gapfill-open.js
"
;
window
.
addEventListener
(
'
load
'
,
main
)
function
main
()
{
// Register our custom question types
Survey
.
CustomWidgetCollection
.
Instance
.
add
(
gapfillSelectWidget
,
gapfillSelectWidget
.
name
);
Survey
.
CustomWidgetCollection
.
Instance
.
add
(
gapfillOpenWidget
,
gapfillOpenWidget
.
name
);
let
survey
=
new
Survey
.
Model
(
json
);
...
...
This diff is collapsed.
Click to expand it.
src/json.js
+
11
−
1
View file @
6677057d
...
...
@@ -2,7 +2,7 @@ export const json = {
elements
:
[
{
type
:
"
gapfill-select
"
,
name
:
"
pg20
"
,
name
:
"
q1
"
,
title
:
"
The greatest song in the world
"
,
segments
:
[
"
🎶
\n
We're no strangers to
"
,
...
...
@@ -37,6 +37,16 @@ export const json = {
"
run around
"
,
"
desert
"
]
},
{
type
:
"
gapfill-open
"
,
name
:
"
q2
"
,
title
:
"
Open-ended gapfill
"
,
segments
:
[
"
Lorem
"
,
{},
"
dolor sit amet [...]
"
],
correctAnswer
:
[
"
ipsum
"
]
}
]
};
\ No newline at end of file
This diff is collapsed.
Click to expand it.
src/style.css
+
1
−
1
View file @
6677057d
...
...
@@ -8,7 +8,7 @@ p#gapfill-container {
white-space
:
pre-wrap
;
line-height
:
3em
;
}
select
.sd-dropdown.inline-dropdown
{
select
.sd-dropdown.inline-dropdown
,
input
.sd-input.inline-input
{
display
:
inline-block
;
width
:
fit-content
;
padding
:
8px
;
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment