Custom 'rendering' of Display Value completing a Survey in SurveyJS - surveyjs

I can't find anything in the documentation of SurveyJS. If there is something I missed, a link would be great!
We have implemented a Custom Widget as described here and it works well. What we want to do next is to change the Display Value on the 'Survey Results' section when testing the survey from the creator. In other words, a 'Signature' question's result is displayed as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAUGklEQVR4nO3dz28j53kH8PwZFYM6btOGAnIwWpRCe2iLAFSK2IgLUD20PTRa9GL4IiUHF2hBnZxDUuoSyT8623rLxAmpbFdCxaVn15n1luQOC3K7IW1yzRKt6HpEgQfyMOSBGPDy9CC9s8MhJc4MZzjvkN8PwIN3sdrZxerr933meZ/3KwQAEBBf8fsBAACsQmABQGAgsAAgMBBYABAYCCwACAwEFgAEBgILAAIDgQUAgYHAAoDAQGABQGAgsABM1JFGtX6Xav0upZUGHZ1ffm63qhOfYu+Cir0LqvW7fj/2SkBgwcpSRxqJnTPab5bp1tMsbebSFMocUihzSGFRoIiUpJh8rH+2y9mx/47mUhSRkhQWBf3XrYsCbRVPaLci0e1WlWr9LinDgd9...
but we don't want to do this, we want to render the result... but not for the signature but for our custom widget.
Also, is there a function to review your answers before submitting? If there is, we'll most probably also need to display a rendered answer of our custom widget here.

Showing a preview of answers before submitting
There is a SurveyJS feature, which does that. To enable it you need to add a survey-level parameter called showPreviewBeforeComplete. You can choose from the following values:
showAllQuestions
showAnsweredQuestions
This feature will automatically render all images or signatures on the preview page.
The feature is also available through the Survey Creator's UI under the "Navigation" section of the survey settings panel.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
}
],
"showPreviewBeforeComplete": "showAnsweredQuestions"
}
Rendering uploaded images
If you would like to create your own widget, which renders uploaded images or signatures, you can base it on the HTML widget. It should contain an <img src='{question1}' /> tag, where the value of the src parameter should be the base64 data string, which you retrieved from the signature pad widget.
Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "signaturepad",
"name": "question1"
}
]
},
{
"name": "page2",
"elements": [
{
"type": "html",
"name": "question2",
"html": "<img src='{question1}' />"
}
]
}
]
}

Related

How to get a guest token for embedding a chart in Apache Superset

The Apache-Superset swagger doc for the guest_token API shows the following payload for the POST request:
I used it successfully from the following Python code snippet from their example included in the source:
body = {
"resources": [
{
"id": "1",
"type": "dashboard"
}
],
"rls": [
],
"user": {
"first_name": "John",
"last_name": "Doe",
"username": "johnd"
}
}
However, the documentation does not give any details on what other resource types besides "dashboard" are available. Can I directly embed a chart? I could have tried the "chart" but there is no documented way to obtain an embedded-id for a chart similar to the procedure that they describe for a dashboard.
To summarize, can I directly embed a chart too similar to a dashboard by this API and embedded sdk?
According to the source, the only accepted resource-type for guest tokens is dashboard:
class GuestTokenResourceType(Enum):
DASHBOARD = "dashboard"
Yeah. Worse case, you could create a 1-chart Dashboard, and embed that.

How to make a BigCommerce widget compatible with PageBuilder

I'm following the tutorial here https://developer.bigcommerce.com/api-docs/storefront/widgets/widgets-tutorial
I made the widget template by performing a post request to https://api.bigcommerce.com/stores/81mdugvyu5/v3/content/widget-templates with this in the body
{
"name": "Header Images",
"template": "{{#each images}}<a href='{{image_url}}'><img src={{image_source}} style='width:33.3%'/></a>{{/each}}"
}
The response was successful.
I then performed a post request to https://api.bigcommerce.com/stores/81mdugvyu5/v3/content/widgets
with this in the body
{
"name": "Header Images",
"widget_configuration": {
"images": [
{
"image_url": "https://google.com",
"image_source": "https://cdn11.bigcommerce.com/s-n0i50vy/images/stencil/1280x1280/products/91/309/thekinfolktablecover_1024x1024__80715.1456436719.jpg?c=2&imbypass=on"
},
{
"image_url": "https://google.com",
"image_source": "https://cdn11.bigcommerce.com/s-n0i50vy/images/stencil/1280x1280/products/109/361/kinfolkessentialissue_1024x1024__22507.1456436715.jpg?c=2&imbypass=on"
},
{
"image_url": "https://google.com",
"image_source": "https://cdn11.bigcommerce.com/s-n0i50vy/images/stencil/500x659/products/85/282/livingwithplants_grande__26452.1456436666.jpg?c=2&imbypass=on"
}
]
},
"widget_template_uuid": "7c5f05c2-2361-45a3-bb99-89554dd145ee"
}
The response was successful.
My custom widget does then appear in page builder but when I try to add it I receive this error
This widget is not supported by Page Builder. Please consult our developer documentation for more information on how to make your
widget compatible with Page Builder
When I visit the developer documentation it links to on how to make it compatible with Page Builder I don't see any mention of Page Builder.
Is there any way to find out how to make the tutorial widget compatible with Page Builder?
#Mikhail was correct. I was able to add it as a widget accessible by page builder by specifying a schema in the body of my widget-templates post request. After sending another request with the schema added like this:
{
"name": "Header Images",
"template": "{{#each images}}<a href='{{image_url}}'><img src={{image_source}} style='width:33.3%'/></a>{{/each}}",
"schema": [
{
"type": "tab",
"label": "Content",
"sections": []
}
]
}
It worked.
You can find more information about schema settings for page builder here https://developer.bigcommerce.com/stencil-docs/page-builder/page-builder-overview
and you can find a list of the items available in your schema here https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings

How do I change the background image on an Alexa Show skill card?

I'm new to programming Alexa skills, especially with the Echo Show. I am trying to change the background image of the skill card from the default dark grey to something else. I know there has to be a way to do this because when I say, "Alexa, tell me a joke." that skill's background is red. And when I say, "Alexa, tell me about LeBron James." Alexa changes the background to LeBron James and the text auto scrolls. Any help on this would be great.
You can indeed change the background of an Alexa Show skill. Unfortunately, at this time Amazon does not offer a bunch of styling functionality beyond that for the Show skills.
The display interface reference is the documentation that you should read. It will give you an understanding of how all your calls and responses will be sent/received as JSON objects. In order to change the background you must choose one of the few template options they have available and add the background key and value to your JSON response structure.
For example, check out the following response structure you should send back from your AWS lambda function. It renders BodyTemplate2 which displays an image on the side of the screen with text on the other side. (This was taken from the display interface reference). Look at the key, "backgroundImage" and the following value.
{
"type": "Display.RenderTemplate",
"template": {
"type": "BodyTemplate2",
"token": "A2079",
"backButton": "VISIBLE",
"backgroundImage": {
"contentDescription": "Textured grey background",
"sources": [
{
"url": "https://www.example.com/background-image1.png"
}
],
"title": "My Favorite Car",
"image": {
"contentDescription": "My favorite car",
"sources": [
{
"url": "https://www.example.com/my-favorite-car.png"
}
]
},
"textContent": {
"primaryText": {
"text": "See my favorite car",
"type": "PlainText"
},
"secondaryText": {
"text": "Custom-painted",
"type": "PlainText"
},
"tertiaryText": {
"text": "By me!",
"type": "PlainText"
}
}
}
}
}

is there a wikipedia api call that can retrieve restriction status of the article?

Otherwise I must do querySelector on the page content to find if there is a some kind of padlock and by try and error check what (id or class) is unique to that icon.
Other source to find is this info is to go on information page by adding $action=info to the url params. But then another problem comes in that the protection status is written in that's particular wiki language.
Using the API is the right way to do it, but you need to use action=query. The padlocks icons are inconsistent across wikis, and most wikis probably don't even have them.
If you use the right parameters for your API query, you should be getting the results you're looking for.
Example for the English Wikipedia:
https://en.wikipedia.org/w/api.php?action=query&prop=info&format=json&inprop=protection&titles=Elton%20John gives you this result:
{
"batchcomplete": "",
"query": {
"pages": {
"5052197": {
"pageid": 5052197,
"ns": 0,
"title": "Elton John",
"contentmodel": "wikitext",
"pagelanguage": "en",
"touched": "2015-10-02T03:49:24Z",
"lastrevid": 683730854,
"length": 115931,
"protection": [
{
"type": "edit",
"level": "autoconfirmed",
"expiry": "infinity"
},
{
"type": "move",
"level": "sysop",
"expiry": "infinity"
}
],
"restrictiontypes": [
"edit",
"move"
]
}
}
}
}
Here the protection array tells you that only sysops can move the page, and only autoconfirmed users can edit it.
If you make a similar query on another wiki, say the French Wikipedia: https://fr.wikipedia.org/w/api.php?action=query&prop=info&format=json&inprop=protection&titles=Malia%20Obama , you get this in response (trimmed):
"protection": [
{
"type": "edit",
"level": "sysop",
"expiry": "infinity"
},
{
"type": "move",
"level": "sysop",
"expiry": "infinity"
}
],
"restrictiontypes": [
"edit",
"move"
]
In this case, sysops are the only one who can move and edit the page.

API Pagination Standards

I have been working on an API and pagination is required. Only 25 elements will be returned in each request. I was looking around for standards and I seem to see 2 different things going on.
The Link Header
Link: https://www.rfc-editor.org/rfc/rfc5988
Example:
Link: <https://api.github.com/user/repos?page=3&per_page=100>; rel="next",
<https://api.github.com/user/repos?page=50&per_page=100>; rel="last"
In the JSON response
Link: API pagination best practices
Example:
"paging": {
"previous": "http://api.example.com/foo?since=TIMESTAMP"
"next": "http://api.example.com/foo?since=TIMESTAMP2"
}
Question:
Should I do both? and that being said; is the key "paging" the correct key? or "links" or "pagination"
I would say it depends on the structure of data you return (and may return in the future).
If you never have nested objects that need their own links, then using the Link header is (mildly) preferable, because it's more correct. The issue with nested objects is that you can't nest Link headers.
Consider the following collection entity:
{
"links": {
"collection": "/cards?offset=0&limit=25"
},
"data": [
{
"cardName": "Island of Wak-Wak",
"type": "Land",
"links": {
"set": "/cards?set=Arabian Knights"
}
},
{
"cardName": "Mana Drain",
"type": "Interrupt",
"links": {
"set": "/cards?set=Legends"
}
}
]
}
There's no good way to include links for the cards in the headers.