JSXGraph Moodle plugin move after student answer - moodle

I have a Moodle question with a JSXGraph image, say
<jsxgraph width="600" height="500">
var brd = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,5,5,-5], axis:true});
var p = brd.create('point', [0,1]);
</jsxgraph>
How can I set
p.moveTo([0,2]);
if the student answers wrong?
I would need to access the board. Somehow I need to get the board ID.

What question type do you use? Ich would recommend to use Formulas. Then you can use our JSXGraph Moodle formulas extension. It is included in the JSXGraph Moodle filter (no files have to be installed additionally). You can find a documentation here: https://github.com/jsxgraph/moodleformulas_jsxgraph/blob/master/README.md.
In your case you can type:
<jsxgraph width="600" height="500" ext_formulas>
// JavaScript code to create the construction.
var jsxCode = function (question) {
var brd = JXG.JSXGraph.initBoard(BOARDID, {boundingbox:[-5,5,5,-5], axis:true});
var p = brd.create('point', [0,1]);
if (question.isSolved)
p.moveTo([0,2]);
};
// Execute the JavaScript code.
new JSXQuestion(BOARDID, jsxCode, /* if you want to see inputs: */ true);
</jsxgraph>
This code would move the point to [0,2] when the question is displayed after submission.
I hope, I could help you.

Thank you. I have been using the STACK question type.
I will try your approach.
Best wishes,
Juha-Matti
(I do not have enough reputation to add a comment, so I have to write my message in this way.)

Related

Capturing DOM Value using GTM

Total noob here so please bear with me:
I am trying to setup dynamic FB remarketing on a client ecommerce site.The problem is that the site doesn't have a data layer setup for this process so I'm trying to scrape some ecommerce values from the DOM (specifically the product name).
Essentially I am trying to capture the product name from this code string from the order confirmation page:
<h3> <p> **Icebreaker® Pocket Hat - Black/Cargo** </p> </h3>
The "Icebreaker® Pocket Hat - Black Cargo" is what I'm trying to feed into a custom FB pixel as a DOM variable in GTM. I've been experimenting all sorts of things but nothing has really worked so far. I've already captured order value this way so I'm fairly confident this is at least possible.
On the same order confirmation page, there is also this bit of JavaScript with the product name in it should that be of use as well:
<script type="text/javascript"> var gbTracker = new GbTracker('cabelasca', 'Production'); gbTracker.autoSetVisitor(); var visitorId = gbTracker.getVisitorId(); var sessionId = gbTracker.getSessionId(); gbTracker.sendOrderEvent({ cart: { items: [ { productId: '79530', title: '**Icebreaker® Pocket Hat - Black/Cargo**', price: 24.97, quantity: 1 }, ] } }); </script>
I am hoping someone knows how to pass this value using some kind of custom GTM variable. Any nudge towards an answer would be greatly appreciated. Thanks guys.
What I would normally do if I need to get some data from DOM is:
Create DOM element variable
This variable will find all necessary data from DOM. For example in your case variable should be like that:
CSS selector: h3 > p > a
Use this variable in your tags
Then in your tags just use this variable like that: {{Product Title}}

How to allow visitors to add new markers in Openlayers or Leaflet

I'm working on an open mapping project and am trying to create a map that would enable website visitors to add markers to the map with some info input fields (markers would be visible by all after approved).
I discovered OpenLayers and Leaflet which both seem promising, and spent some time putting together basic maps, but after a lot of searching I've been unable to find anything on allowing visitors to add new markers to maps made with these two tools. Anyone know if this is possible ~~ or if there's another open source tool that would work better for this application? I'm solid in HTML//CSS and know basics of JQUERY - but am not well versed in javascript so if there are more plug-n-play tools thats preferred, but if not I'm willing to do the work to learn...
Thanks!
Yes you can, check out https://openlayers.org/en/latest/examples/draw-features.html to draw the feature(Point/Line/Polygon) on map vector layer
and then you can grab that feature and save it in database and reproduce it later depending upon your business logic.
You can save the drawing from the above example some what like this in javascript:
var features = source.getSource().getFeatures();
To get Point's coordinates :
var lonlat = features[0].getGeometry().getCoordinates();
var longitude = lonlat[0];
var latitude = lonlat[1];
But as ghybs said, you need to do back end work as well.
you need in LEAFLET but this solution is in NUXTjs add this to you code:
#dblclick to you event method and get new lat al lng points to store in database o do something:
<div id="map-wrap" style="height: 100vh">
<no-ssr>
<l-map :zoom="13" :center="[-16.5002, -68.1493]" #dblclick="newMarkerbyClient">
<l-tile-layer
url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
></l-tile-layer>
<l-marker :lat-lng="[xPosition, yPosition]"></l-marker>
</l-map>
</no-ssr>
</div>
and you script
data() {
return {
xPosition: -16.5002,
yPosition: -68.1493,
}
},
methods: {
newMarkerbyClient(e) {
console.log("x: " + e.latlng.lat + " y:" + e.latlng.lng);
this.xPosition = e.latlng.lat;
this.yPosition = e.latlng.lng;
//xPosition and yPosition are you new point provided by client and you can do anything with this
}
}
Regards from BOLIVIA

Knockout 2: How to delay observable object.

Hi i have a problem in knockout 2: I want to do late binding because i am adding data-bind via jQuery
$("#button1").on ("click", function() {
lateBinding = $("#lateBindingElem);
if (lateBinding.length) {
lateBinding.attr("data-bind", "text: obs");
}
}
});
late binding is an html generated on the fly.
I have a view model created already call MyViewModel.
I want to add another attribute or another observable (could be computed or uncomputed) on the fly to existing view model? How would i do this?
Hopefully you have already found an answer elsewhere (7 months ago :D) but since I stumbled upon this question in hopes to find a solution to a similar problem, I might as well and try to give a sort-of-an-answer for anyone else looking into it. This won't let you manipulate the binding for elements you already have bound to a model but allow you to pause binding at given points and bind newly created elements to your current or a different viewmodel.
Built on Ryan Niemeyers great article about how to stop bindings and accompanying jsfiddle example is a little demo which adds new input elements to dom and binds them to different viewmodels.
Since you can only bind a section of your dom once you need to stop the downward binding at some point using a custom binding..
ko.bindingHandlers.stopBinding = {
init: function() {
return { controlsDescendantBindings: true };
}
};
assign it to a wrapper
<div data-bind="stopBinding: true" id="addNewContentHere"></div>
and insert your new elements
function addInput(){
var data=$('<input type="input" data-bind="value: newInput" />');
ko.applyBindings(MyViewModel, data[0]);
$('#addNewContentHere').append(data);
};
hope it is of some use :)

Orchard - add class or id to the body using fields

My questions is - how do I add a class or id to the body tag using a text field within Orchard?
So if I enter the word "product" in the text field then the result should be <body class="product">. I want to use this method instead of creating alternate layout templates as every page has the same layout but I need a different class for each page to reference a different colour scheme I have setup for each page in my CSS.
I have added a text field with the name Area to the Title ContentType in the backend. My problem is now how to get the value of the field to be put into the body in the Document.cshtml.
I have read Setting Unique Body Classes and IDs in Orchard and Using Alternatives for Document.cshtml in Orchard CMS but I still can't get it to work! The second one seems like what I want to do but so far I have been unable to acheive it.
Any answer would be very appreciated?
Thanks
Andy
I am so frustrated that there is no readily available solution found in the net about this. Since I am more comfortable coding in jquery & js...
Here's my solution: Assuming you have jquery loaded...
#using(Script.Foot()) {
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
var url = window.location.pathname;
var count = url.match(new RegExp("/", 'g'));
var urlsplit = url.split("/");
var page_class = urlsplit[count.length];
alert(page_class);
$('body').addClass(page_class);
});
//]]>
</script>
}
The easiest way to achieve this is to use the Classy feature from Vandelay.Industries.

How can I submit a DOM table to php?

I have a <table> in a web page that I populate using JavaScript code like this:
var cellBarcode = row.insertCell(1);
var textNode = document.createTextNode(barcode);
cellBarcode.appendChild(textNode);
var cellItemName = row.insertCell(2);
var textNode = document.createTextNode(itemName);
cellItemName.appendChild(textNode);
I need to save its data to my database... So I need to know how I can submit it to php... Is it possible...? If yes, please provide some sample codes that are easy to understand for a beginner like me... thanks...
Yes, you can submit this information to a server-side script, but not without extra JavaScript code.
The extra JavaScript code would collect the information in the table (either from the DOM you've built, or by accessing the same data you used when building the table) into a string, which can then be sent to the server using one of standard ways.
Since you've used the term "submit", I'm assuming you want to send the table's data as part of an HTML <form> submission, you can put the generated string in an <input type="hidden"> element.