HowTo

Welcome to the Moin Münster wiki! Here you find tutorials on how to add or edit the content of the application.

Updating Github Page

YOU HAVE TO DO THIS AFTER YOUR CHANGES TO GET THE CAHNGES INTO THE LIVE VIEWABLE GITHUB PAGE FOR THE STUDENTS!

Regarding the fact that the application currently runs on github pages it is easy for you to change your forked version of the application, push your changes into the repository and update the github page. If you ever would like to get your changes into your live github page you have to type following two npm commands after you have pushed your changes into the repository:

npm run predeploy

and then

npm run deploy

Then everything should be updated and you should see the webside at https://YOUR_USERNAME.github.io/REPOSITORY_NAME_CASESENSITIVE/

Text Updating

If you would like to update a text you first need to find this text inside the source code. Rerarding the fact, that this is a react application, you will find all the source code under the following folder

/src/components

Here you can see some jsx files that have names related to the sections of the app. Now you just need to find the right file and inside this the text you would like to change.

You will always find a statement like this

{language==="german" ? DO_SOMETHING : DO_SOMETHING_ELSE}

which means that the app is checking if the user is looking at the german page = the Bachelor page or else the english page = Master page. The statement is sometime turned around (asking for language === "englisch") and sometimes got a nested if else clause first checking for the one and then for the other language. I did that for future languages, which I then stopped because it is not necessary.

Always keep in mind to change both the english and the german version if you do so.

FAQ Add A Question

To add a question to the FAQ you only need to copy on of the Col and everything that is inside

`

. . . ` …inside the FAQ.jsx file and add it after the last one. Furthermore, to ensure the collapsing of it you need to edit the status inside the FAQ.jsx file. Add another number to

`

const [open, setOpen] = useState({ 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false, }); `

which handles if the question is unfolded or not. Also, update it to your newly added number inside your Col three times: Here two times where you now see the 1

onClick={() => setOpen({ ...open, 1: !open[1], }) }

And here one time

<Collapse in={open[1]}>

Edit the text and keep in mind that there is always a German and an English text.

Locations for the Exploration Map

To add points to the map you have to edit the sights.json file you can find at \src\data. To add a point, you might just type the data manually into the json file or load the file into a GIS and use its tools to add data.

Watch out to not use ID = 0 and check that none of the ID is multiple occupied.

Important to know: There is always a TITLE, DESCRIPTION, HINT etc. field for the English version and then there are TITLE_D, DESCRIPTION_D etc. for the German version of the web application. The ADDITIONAL and ADDITIONAL_D field is not yet used but may be for future work.

If you would like to add a picture you might check out flickr. In the first version of the application there were a lot of flickr pictures in use. At flickr when you found a picture you like to embed you have to push on the share button an see if there is the option to embed. If not, you can’t embed this picture. If you can, you have to cope the html code, but you only need the link to the picture and the flickr reference. The mostly shorter link with the jpg at the end is the IMG_LINK and the other link is the FLICKR_REF. You can also use other pictures if you only got a link to the image. In this case put the link into IMG_LINK and set the FLICKR_REF as NULL. Both works fine but keep in mind that it is important to mention the author of the image.