Question not displaying

[Potolozi]

I've just installed WordPress + H5P in a new environment - as a local installation for testing purposes. Drag text questions do not display. I can open the question in the editor and then I can see it but when I close the editor the question does not display. Also when I insert that question in a post it does not display. Single Choice set questions work as expected.
WordPress is the latest version: 4.6
H5P Plugin is the latest: 1.7.2
The Library is updated. Drag Text version is 1.5.1
It must have something to do with my local environment - but I'm not sure what to look for as the error. I have a similar setup at a shared host and I have no problem there.
I'm running XAMPP on a Windows 10 machine. I've tried both Ms Edge and Chrome - so the issue is not the browser.
Not sure where else to ask for support - ideas?

[Potolozi]

One thing I noted is the size of the Drag text question - it is larger than 1MB - not sure if that is an issue and where I would change an environment variable that controls that.

[fnoks]

Could you please check the browser's console, and see if you get any JavaScript errors?

[Potolozi]

@fnoks No errors - but I do get this html output from the JavaScript, as listed below. Perhaps that throws some light on the issue?

<div class="entry-content">
<div class="h5p-content" data-content-id="5"></div>
<div class="h5p-iframe-wrapper"><iframe id="h5p-iframe-8" class="h5p-iframe" data-content-id="8" style="height:1px" src="about:blank" frameBorder="0" scrolling="no"></iframe></div>
<div class="h5p-iframe-wrapper"><iframe id="h5p-iframe-1" class="h5p-iframe" data-content-id="1" style="height:1px" src="about:blank" frameBorder="0" scrolling="no"></iframe></div>
</div>

The first question, SingleChoiceSet 1.4 class="h5p-content" displays, the other two DragText 1.5 questions which output as class=h5p-iframe-wrapper" don't display. Why they result in src="about:blank" I don't know. I must add that I didn't add them as iframes - that is WP+H5P's own interpretation. I added them as normal questions that were created in the H5P plugin on the same system.

[Potolozi]

This is the Java Script being executed (from DOM explorer) for one of the questions not displaying:
"cid-8":{"library":"H5P.DragText 1.5","jsonContent":"{\"taskDescription\":\"<p>Match the items by dragging the words into the correct boxes<\\\/p>\\n\",\"checkAnswer\":\"Check\",\"tryAgain\":\"Retry\",\"showSolution\":\"Show solution\",\"score\":\"You got @score of @total points\",\"behaviour\":{\"enableRetry\":true,\"enableSolutionsButton\":true,\"instantFeedback\":false},\"textField\":\"1. Software used to convert scanned documents to a format where the text can be edited: *OCR*\\n2. A computer that provides resources and\\\/or services to other computers on a network: *server*\\n3. A high-performance electronic storage device, often used to replace traditional hard drives: *SSD*\\n4. A spreadsheet function that specifies the accuracy of a calculation in terms of the number of decimal places used: *ROUND*\\n5. An object in a database that can be used to perform searches based on specified criteria: *query*\\n6. The manipulation of data into meaningful information: *processing*\\n7. field of study aimed at reducing the effects of RSI for the user: *ergonomics*\\n8. A unit used for measuring the storage capacity of a device: *byte*\\n9. The technology used to receive automatic content updates from websites without having to visit each website separately: *RSS*\\n10. A small piece of software that adds specific functionality to software, such as a web browser: *plug-in*\"}","fullScreen":"0","exportUrl":"\/wp\/wp-content\/uploads\/h5p\/exports\/dbe-cat-2014-nov-theory-q1-matching-8.h5p","embedCode":"<iframe src=\"http:\/\/localhost\/wp\/wp-admin\/admin-ajax.php?action=h5p_embed&id=8\" width=\":w\" height=\":h\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>","resizeCode":"<script src=\"http:\/\/localhost\/wp\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>","url":"http:\/\/localhost\/wp\/wp-admin\/admin-ajax.php?action=h5p_embed&id=8","title":"DBE CAT 2014 Nov Theory Q1 Matching","disable":0,"contentUserData":[{"state":"{}"}],"scripts":["\/wp\/wp-content\/uploads\/h5p\/cachedassets\/1d1a42a464a563d684d9708335fcd52423f4b6e4.js"],"styles":["\/wp\/wp-content\/uploads\/h5p\/cachedassets\/1d1a42a464a563d684d9708335fcd52423f4b6e4.css"]}

[Potolozi]

I wonder if this has something to do with Apache running under Windows? I know that I have to configure another system to use ";" and not the default ":" as parameter separator for Apache under Windows.

[Potolozi]

I have a Drag Text question on another website on another server. I can insert it as an iframe in my test (local) WP site - no problem. It displays.
However, when I download a Drag Text question and upload it into my test WP site or whether I create it on my test WP site, it does not display. Not immediately after I've created it (in the H5P plugin) nor on the site when I insert it as [h5p id="8"]. The text and everything displays in the editing mode but not in the display mode.

[fnoks]

I suspect the problem is with the iframes' height (i.e. resizing). Could you manually change the following attribute for the iframe:
style="height:1px"
to e.g.:
style="height:300px"

This can be done using e.g Chrome's "Developer Tools".

[twelch555]

Hi, apologies if you would rather have a separate issue for this, but the symptom are similar to those that @Potolozi describes with the following differences:

1. We are running on a multisite. Most sub-sites display the drag text just fine. In fact the content authors create the content items on one site and then export/import to a different site.
2. Also, I am getting the following javascript error on the page:

Uncaught TypeError: $(...).draggable is not a function
    at DragText.H5P.DragText.DragText.addDragNDrop (http://engl1101-2.trubox.ca/wp-content/uploads/sites/230/h5p/cachedassets/5775e26c8bd6ef912fb112cb7eef10cf08469038.js:3075:8)
    at DragText.H5P.DragText.DragText.handleText (http://engl1101-2.trubox.ca/wp-content/uploads/sites/230/h5p/cachedassets/5775e26c8bd6ef912fb112cb7eef10cf08469038.js:2990:14)
    at DragText.H5P.DragText.DragText.addTaskTo (http://engl1101-2.trubox.ca/wp-content/uploads/sites/230/h5p/cachedassets/5775e26c8bd6ef912fb112cb7eef10cf08469038.js:2955:10)
    at DragText.H5P.DragText.DragText.initDragText (http://engl1101-2.trubox.ca/wp-content/uploads/sites/230/h5p/cachedassets/5775e26c8bd6ef912fb112cb7eef10cf08469038.js:2750:10)
    at new DragText (http://engl1101-2.trubox.ca/wp-content/uploads/sites/230/h5p/cachedassets/5775e26c8bd6ef912fb112cb7eef10cf08469038.js:2718:10)
    at Object.H5P.newRunnable (http://engl1101-2.trubox.ca/wp-content/plugins/h5p/h5p-php-library/js/h5p.js?ver=1.7.6:815:16)
    at HTMLDivElement.<anonymous> (http://engl1101-2.trubox.ca/wp-content/plugins/h5p/h5p-php-library/js/h5p.js?ver=1.7.6:141:24)
    at Function.each (http://engl1101-2.trubox.ca/wp-content/plugins/h5p/h5p-php-library/js/jquery.js?ver=1.7.6:2:5257)
    at init.each (http://engl1101-2.trubox.ca/wp-content/plugins/h5p/h5p-php-library/js/jquery.js?ver=1.7.6:2:2013)
    at Object.H5P.init (http://engl1101-2.trubox.ca/wp-content/plugins/h5p/h5p-php-library/js/h5p.js?ver=1.7.6:101:78)

1. It happens with only the drag text content type and with all content elements of this type.

Troubleshooting steps
Tried on site with the same theme (works fine)
Tried cloning the site (doesn't work)
Tried file copy of library files from a working site (doesn't work)
Tried on a different browser with a clean cache
Tried deleting contents of cachedassets folder

Any advice you can offer would be great.

[timothyylim]

Multi-site functionality is not something we have extensively tested for in Wordpress yet. I've made an issue on our public Jira board: https://h5ptechnology.atlassian.net/browse/HFP-298

I hope that it is something we will have the time to address in the next release.