Create javascript links reflecting availability of assigments

Jump to solution
martijn_koops
Community Explorer

For a few days I have been trying to create a javascript that fetches json from the api.
Finally I figured out something that works more or less...

The idea is to generate a list of assignments on a course page.
The locked ones will be grey, the unlocked ones will be green.

For now I am just trying to fetch the json fromt he api and show it on a page.
or rather, the text response, since the json file starts witjh while(1) .. and is not correct json

I got it to work but I am not allowed in I think, while tyhe script is called form within the coursesite itself.

The response.text  I get form the fetch() is:

"while(1);{"errors":[{"message":"The specified resource does not exist."}]} "

I am calling the script from within the canvas site.

The fetch_test.html file ( contents below) is placed in the files directory of the course.
In a course page I embedded it in an iframe:

<p>
<iframe style="display: block; margin-left: auto; margin-right: auto;" src="https://xxxx/courses/yyyy/files/XXXX/download" width="100%" height="459" data-api-endpoint="https://xxxx/api/v1/courses/yyyy/files/XXXX" data-api-returntype="File"></iframe>
</p>

 
fetch_test.html:
<html>
    <head>
        <script>
            // first figure out the current course Id of the course where this html files is embedded in an Ifram
              pathRegex = new RegExp('([0-9]+)/?/','g');
              var matches = pathRegex.exec(window.location.pathname);
              
              var courseId = matches[1];
              var urlcanvas = '/api/v1/courses/' + courseId + '/assignments?per_page=100';
         
            // fecth the json list of all assigments: file starts with while(1) , so for hte time being fetch text
            fetch(urlcanvas, {credentials: 'include'})
                .then(response => response.text())
                    .then(function(data){
                        document.getElementById("data").innerHTML = data;
                    })
                .catch(function(err){
                    alert(err);
                });
             // next step will be: list all assignements (in buttons?), per module, ans show with colors which ones are locked
            
            </script>
    </head>
    <body>
        
        <h2 > Show the json of assigments in the actual course</h2>
            
        <p id="data"><p>
            
    </body>
</html>
Labels (3)
0 Likes
1 Solution

haha, sorry, that could have been phrased so much better. Yup, LTI running from another server is probably the way to go. You will need specific Canvas permissions to be able to configure it for your course.

UCF has a python 2.7 LTI starter template, which I have been able to successfully use. 

https://github.com/ucfopen/lti-template-flask

I'm in the process of migrating that to 3.9 and expanding it for my needs. 

View solution in original post