audio tour button does nothing on local server

[cchaz003]

What Course are you in thinkcspy - locally hosted server

What Page were you on 4.3 Instances - A Herd Of Turtles (or other audio tour pages)

Describe the bug I'm not entirely sure where to ask this question so if this is the wrong place, please let me know. I've been working on getting a runestone server setup for this fall and I've gotten pretty far but I'm currently stuck on how to get audio tours to work properly. The button shows up but when pressed it does nothing (no error in the browser nor in the server console). At first I assumed this was a problem with the book we're putting together but I just built a fresh copy of thinkcspy on our server and that's not working either so it would seem to me that this is related to the server install.

I tried following the server install guide as best as I could and built a script that takes care of the installation. The script can be found here: https://github.com/cromerMHC/RunestoneInstaller/blob/master/RunestoneInstaller.sh and is intended to do a full installation only asking the user to create a database user (it's not the best installation solution but I needed something that could be tested over and over while I sort out any issues like this one). I assume I'm just missing something...

Hopefully someone can take a look and let me know if something looks fishy.

Additional context I've been doing my testing on an ubuntu server 20.04 VM.

[bnmnetp]

Normally this is a problem with getting to the audio files. But you are not seeing any 404 errors in the javascript console??

You do know that we have a docker Container so that you don't need to build an installer script right? I even made a nice video on how to get it in installed and running on 20.04

Now I don't know if you have done a lot of audio tours, it would be cool if you had. But I think there are only one or two in all of thinkcspy. So it does not get a lot of love.

My first suggestion would be to update the source for the question and make sure the audio files are hosted from a static folder on your own runestone server.

[cchaz003]

Thanks for getting back to me so quickly!

No, no errors of any sort pop up. Since I tested on a fresh clone of thinkcspy I figured that it must be related to the server being misconfigured rather than the book we're working on, no? I even copy/pasted the link to the audio file in manually and it was served up to me so the file is in the right place in the static folder.

I'm aware of the docker container however I had a number of issues with books in the docker version (couldn't seem to get any books besides the built-in/official ones added in such a way that students could register with a custom ID, web based assignment creation/html generation didnt work, and a couple other things). Since I'm less versed in containerized workflows I figured I'd take a stab at installing it manually in a 20.04 VM. I wasn't aware of your 20.04 installation video and would love to get a link for that if you have it handy!

[bnmnetp]

Here is a link to a video I made on getting Docker running:  https://youtu.be/y3oeBmRQVf0

To get your own book into the system so it can be registered for etc. you need to get into the container and to rsmanage addcourse

On our overview page there is a working audiotour. You almost always have to do what the message says in order to get it to start.

There is really nothing server side that prevents audio tours from running if you have access to the audio files. They are just served as static assets. There will not be a pop up error, but a 404 will show up in the Javascript console.

I'm curious about what kind of book you have written? Is it open source ? Of interest to other instructors using Runestone?

[cromerMHC]

(FYI same person replying - just it's from my work account now)

I spent the morning working on getting the docker version installed as closely as I could to your video. Again I made a script to make my testing more consistent. This is the script at the moment...

#part of the install requires a reboot to add them to the docker group so mark down whether the user has finished part 1 or not
#with this little hidden file. The user will simply reboot and then re-run the script and it should pick up at the second
#half of the installation
part1File=~/.runestonept1Done

if [ ! -f "$part1File" ]; then

    sudo apt-get -y install git net-tools docker.io docker-compose npm

    echo $'\n\n'
    passvar=1
    passvar2=2
    while [ "$passvar" != "$passvar2" ]
    do
        read -sp 'Enter a password for the Postgres database: ' passvar
        echo
        read -sp 'Re-Enter Password: ' passvar2
        echo
        if [ "$passvar" != "$passvar2" ]; then
            echo
            echo "Password mismatch. Try again"
        fi

    done
    echo $'\n\n'

    serverIP=$(ifconfig | grep 'inet ' | sed -n 2p | awk '{print $2}')

    echo "export RUNESTONE_HOST=$serverIP" >> ~/.bashrc
    echo "export POSTGRES_PASSWORD=$passvar" >> ~/.bashrc

    sudo systemctl enable docker

    mkdir ~/Runestone
    cd ~/Runestone

    #our version of the server repo includes a docker-compose.override.yml file and 
    #a slightly modified dockerfile as per the instructions in the youtube video
    git clone https://github.com/cromerMHC/RunestoneServer

    git clone https://github.com/RunestoneInteractive/RunestoneComponents

    cd ~/Runestone/RunestoneComponents/
    npm install
    npm build

    cd ~/Runestone/RunestoneServer/

    sudo groupadd docker
    sudo usermod -a -G docker ${USER}

    touch ~/.runestonept1Done
    echo "part 1 installation done. Please restart the system and re-run this installation script to continue with the installation"
    exit
fi

cd ~/Runestone/RunestoneServer
docker build -t runestone/server .

cd ~/Runestone/RunestoneServer/books
git clone https://github.com/RunestoneInteractive/fopp
cd ~/Runestone/RunestoneServer/books/fopp
git checkout ac101
cd ~/Runestone/RunestoneServer/

#the configs folder will allow CSV files to be added to auto add studetns/instructors to courses
mkdir ~/Runestone/RunestoneServer/configs

echo "installation complete. Go to the Runestone/RunestoneServer folder and Run 'docker-compose up -d' to start the server"

When it's all booted up I can login, create an account, etc. However the components dont seem to be working properly. When I look at the audio tour page from before in fopp it now looks like this

and when I go to create an assignment I get this error when I press the "generate html" button

I cleared my cache and used a different web browser and got the same error.

The runestone server logs show lines like this when trying to generate the html or load other pages:

{address space usage: 374575104 bytes/357MB} {rss usage: 79142912 bytes/75MB} [pid: 67|app: 0|req: 1/6] 192.168.1.27 () {52 vars in 992 bytes} [Tue Jul 28 16:45:39 2020] POST /runestone/ajax/preview_question => generated 83 bytes in 610 msecs (HTTP/1.1 200) 6 headers in 324 bytes (1 switches on core 0)

[bnmnetp]

I think the components are not working because you don't have a properly build runestone.js -- please check the Javascript console for errors.

but the command npm build should be npm run build

[cromerMHC]

Ok so that solved something but I'm still not able to play the audio tour (or generate the html for an assignment). The console log for the html generation looks like this:

admin.js?v=1595955445:1804 Uncaught TypeError: component_factory[componentKind] is not a function
    at renderRunestoneComponent (admin.js?v=1595955445:1804)
    at Object.success (admin.js?v=1595955445:1748)
    at c (jquery-1.10.2.min.js:4)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4)
    at k (jquery-1.10.2.min.js:6)
    at XMLHttpRequest.r (jquery-1.10.2.min.js:6)

The audio tour is going to be ok I think. It now comes up but I'm getting 404 errors on all of the links (links point to http://media.interactivepython.org/fopp/audio/Example03_Tour01_Line09.mp3) which I assume might be because I checked out the ac101 branch of fopp (as per the video) which doesn't have updated links perhaps?

[bnmnetp]

Its because there is no fopp folder for media, which shows you exactly how little these are used. -- I just copied thinkcspy to fopp so that may solve the problem.

Can you show me the source for the question you are trying to write? I think there must be an error.

[cromerMHC]

Yes, that solved the issue on the audio tour side of things! Now I just have to try it with the audio files in our book but thats very promising!

The active code question I've been using as a test may very well have an error but it works on the main Runestone site... I made it a few weeks ago when I was just learning how things work.

.. activecode:: avgSpeed
    :language: python
    :autograde: unittest

    Write a function that takes a list of numbers and computes the average value
    ~~~~
    def avg_list(inList):
        # your code here
    ====
    from unittest.gui import TestCaseGui

    class myTests(TestCaseGui):

        def testOne(self):
            self.assertEqual(avg_list([10, 10]),10,"failed test 1")
            self.assertEqual(avg_list([10, 5]),7.5,"failed test 2")
            self.assertEqual(avg_list([10, -10]),0,"failed test 3")

    myTests().main()

[cromerMHC]

So I've just added in the book we're working on and still getting issues with the audio tour files. For reference here is the audio tour we're testing out (audio files are located in _sources/_static/Audio):

.. activecode:: WeeklyWage
    :nocodelens:
    :tour_1: "Line by Line Tour"; 1: ../_static/Audio/WeeklyWage-line1.wav; 2: ../_static/Audio/WeeklyWage-line2.wav; 3: ../_static/Audio/WeeklyWage-line3.wav; 4: ../_static/Audio/WeeklyWage-line4.wav; 5: ../_static/AudioWeeklyWage-line5.wav;

    hours = 20    # number of hours worked per week
    hourly_wage = 12   # amount paid per hour worked
    salary = hours * hourly_wage  # salary is product of hours worked and hourly wage
    print("weekly salary:")  # print label to screen
    print(salary)  # print calculated salary to screen

Now it's giving 404 errors for those but oddly it seems like it's trying to reach them at http://media.interactivepython.org/. The whole error looks like this:

Uncaught Error: Syntax error, unrecognized expression: #../_static/Audio/WeeklyWage-line1.wav
    at Function.se.error (jquery.js:2)
    at se.tokenize (jquery.js:2)
    at se.select (jquery.js:2)
    at Function.se [as find] (jquery.js:2)
    at S.fn.init.find (jquery.js:2)
    at new S.fn.init (jquery.js:2)
    at S (jquery.js:2)
    at AudioTour.playaudio (audiotour.js:495)
    at AudioTour.playCurrIndexAudio (audiotour.js:410)
    at AudioTour.tour (audiotour.js:330)

and then gives a bunch of 404 errors like this: GET http://media.interactivepython.org/comsc-150_f20_lisa/_static/Audio/WeeklyWage-line1.wav.wav 404 (Not Found)

[bnmnetp]

Hmmm,

Thats not it.

No other errors in the javascript console?

The usual disclaimer is to make sure to do a hard refresh on the page.

[bnmnetp]

OK, remember when I told you audio tours were seldom used. I think you are the first author besides Barb to try them.

I just looked at the code and it has been hardcoded look in media.interactivepython.org for years.

Thats definitely a bug in audiotour.js line 314.

I won't have time to do anything about it for a few days. But PRs are always welcome if you can fix it.

[cromerMHC]

Ahh ok - glad we finally figured it out! I'm definitely not a javascript person so I probably shouldn't touch any of it... Thanks for taking the time to dig into this with me though! I think we'll be fine over the next few days

As for the html generation I tried mutliple browsers, cleared caches, and used private windows... All seem to be giving the same error. I noticed a 404 error when the page is loaded that I hadn't seen before. Maybe that's contributing to it. Here's a full screenshot

[bnmnetp]

Can you make sure that you have pulled the latest from RunestoneComponents on github? The line numbers are off just a bit.

Also the fact that sharedb.js is missing is quite worrisome that something went wrong. Also sharedb.js comes from the same source component that implements activecode.

You can shell into the container and look at applications/runestone/books/fopp/published/fopp/_static and check to see if that file is there.

[cromerMHC]

It says that I'm up to date with origin/master. I'm using my own RunestoneServer fork from ~2 weeks ago. I never made any changes real changes but I added the docker-compose override file and commented out the Dockerfile line to install texlive-full xsltproc pdf2svg as per the video. Could that being a couple weeks old do it?

Also I do not see sharedb.js in there.

[bnmnetp]

Yeah, admin.js comes from RunestoneServer so fetch upstream and see if that helps.

The missing sharedb.js is a mystery. Is it in RunestoneComponents/runestone/activecode/js ?? If it is not, then you somehow have a broken version of RunestoneComponents.

You could try to run npm run build in the RunestoneComponents folder just to make sure everything is built correctly.

Also you could shell into the container and run runestone build --all deploy from the fopp folder. -- actually please do that. I think that you may have gotten a bad build the first time around and now its running runestone build which may not see that it has new javascript files to copy to _static!

[cromerMHC]

After re-forking this repo to make sure nothing was out of whack and trying out what you suggested above (...and resetting my VM a number of times) I'm still coming up short. The only changes in my fork are the dockerfile change from the video and a adding in the compose override file.

sharedb.js is in the RunestoneComponents/runestone/activecode/js folder and this is the output of running npm run build

> WebComponents@1.0.0 build /home/cromer/Runestone/RunestoneComponents
> webpack --env.MODE=development

⚠ ｢copy-webpack-plugin｣: unable to locate 'static' at '/home/cromer/Runestone/RunestoneComponents/static'
Hash: 88c4cb11eec9efbdaa47
Version: webpack 4.41.4
Time: 2634ms
Built at: 07/28/2020 9:21:03 PM
       Asset      Size  Chunks             Chunk Names
  index.html    11 KiB          [emitted]  
runestone.js  7.81 MiB    main  [emitted]  main
Entrypoint main = runestone.js
[0] multi ./runestone/shortanswer/js/shortanswer.js ./runestone/activecode/js/acfactory.js ./runestone/mchoice/js/mchoice.js ./runestone/fitb/js/fitb.js ./runestone/clickableArea/js/clickable.js ./runestone/dragndrop/js/dragndrop.js ./runestone/timed/js/timed.js ./runestone/parsons/js/parsons.js ./runestone/poll/js/poll.js ./runestone/common/js/user-highlights.js ./runestone/spreadsheet/js/spreadsheet.js ./runestone/tabbedStuff/js/tabbedstuff.js ./runestone/reveal/js/reveal.js ./runestone/datafile/js/datafile.js ./runestone/showeval/js/showEval.js ./runestone/video/js/runestonevideo.js ./runestone/lp/js/lp.js ./runestone/codelens/js/codelens.js ./runestone/webwork/js/webwork.js 244 bytes {main} [built]
[./runestone/activecode/js/acfactory.js] 6.78 KiB {main} [built]
[./runestone/clickableArea/js/clickable.js] 18.3 KiB {main} [built]
[./runestone/codelens/js/codelens.js] 2.97 KiB {main} [built]
[./runestone/common/js/user-highlights.js] 11.6 KiB {main} [built]
[./runestone/datafile/js/datafile.js] 3.12 KiB {main} [built]
[./runestone/dragndrop/js/dragndrop.js] 20.4 KiB {main} [built]
[./runestone/fitb/js/fitb.js] 16.2 KiB {main} [built]
[./runestone/lp/js/lp.js] 8.06 KiB {main} [built]
[./runestone/mchoice/js/mchoice.js] 21.9 KiB {main} [built]
[./runestone/parsons/js/parsons.js] 125 KiB {main} [built]
[./runestone/poll/js/poll.js] 8.49 KiB {main} [built]
[./runestone/reveal/js/reveal.js] 8.76 KiB {main} [built]
[./runestone/shortanswer/js/shortanswer.js] 11.8 KiB {main} [built]
[./runestone/showeval/js/showEval.js] 7.79 KiB {main} [built]
    + 91 hidden modules

WARNING in unable to locate 'static' at '/home/cromer/Runestone/RunestoneComponents/static'
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 11.6 KiB {0} [built]

I also tried runestone build --all deploy and there is still no sharedb.js in the published/fopp/_static folder... Any thoughts on where to look next?

[bnmnetp]

Ok, I think maybe the sharedb.js thing is a red herring.

Are you still getting the component factory error? That is on the assignment tab of the instructors interface?

Do things in the rest of the book look OK?

Shell into the container and look in applications/runestone/errors

Are there a bunch of files in there?

there will be a hard to read stack trace near the top that may give us some clues.

[bnmnetp]

PS, it may be better to debug this on Zoom. I have drop in hours on zoom for devs and authors every wednesday. The details for that meeting are posted in our slack channel. https://www.runestoneinteractive.com/pages/support.html for the link to join.

[cromerMHC]

I'm not getting the same error as before but yes still getting a component factory error. Here's what shows up now. This error only seems to appear when clicking the generate html button on the assignments tab.

There aren't any files in the errors folder... of course haha

I just got on the slack - I'll check in tomorrow

[bnmnetp]

OH!! So -- Error: Runestone build failed: unable to load configuration from runestone

Do you have an applications/runestone/build/preview folder? You should and it should have a conf.py and a pavement.py file.

If those files are there shell into the container and try to run runestone build from the preview folder.

[cromerMHC]

I was so focused on the console, I hadn't noticed that part of the error before. I do have the preview folder and I just built it successfully - still getting the same error (cleared cache, different browser, etc).

[bnmnetp]

OK, I think I know whats going on now. in applications/runestone/models/1.py. (or 0.py) You need a line like this:

settings.python_interpreter = "python3.8"

Where you set the correct version of python. In 0.py it gets set to sys.executable which in some cases ends up being nginx !

[cromerMHC]

Success, that did it! Thank you so much for all of your help!

Now we just gotta fix that audio tour bug - I took at look at it and it looks like it used to look for files locally but got changed to http://media.interactivepython.org/ at some point. I could probably fix it on our end but I assume changing that line in the main repo will break the existing audio tours (few as they may be).

            var dir =
                "http://media.interactivepython.org/" +
                eBookConfig.basecourse.toLowerCase() +
                "/audio/";
            //var dir = "../_static/audio/"

[bnmnetp]

Fixed in 5.0.13